Add loader

reminder-dashboard/src/components/Guild/GuildReminders.tsx

@@ -4,6 +4,7 @@ import { fetchGuildChannels, fetchGuildReminders } from "../../api";
 import { EditReminder } from "../Reminder/EditReminder";
 import { CreateReminder } from "../Reminder/CreateReminder";
 import { useState } from "preact/hooks";
+import { Loader } from "../Loader";
 
 enum Sort {
     Time = "time",
@@ -14,7 +15,12 @@ enum Sort {
 export const GuildReminders = () => {
     const { guild } = useParams();
 
-    const { isSuccess, isFetching, data: guildReminders } = useQuery(fetchGuildReminders(guild));
+    const {
+        isSuccess,
+        isFetching,
+        isFetched,
+        data: guildReminders,
+    } = useQuery(fetchGuildReminders(guild));
     const { data: channels } = useQuery(fetchGuildChannels(guild));
 
     const [collapsed, setCollapsed] = useState(false);
@@ -23,6 +29,8 @@ export const GuildReminders = () => {
     let prevReminder = null;
 
     return (
+        <>
+            {!isFetched && <Loader />}
             <div style={{ margin: "0 12px 12px 12px" }}>
                 <strong>Create Reminder</strong>
                 <div id={"reminderCreator"}>
@@ -49,7 +57,10 @@ export const GuildReminders = () => {
                                         <option value={Sort.Name} selected={sort == Sort.Name}>
                                             Name
                                         </option>
-                                    <option value={Sort.Channel} selected={sort == Sort.Channel}>
+                                        <option
+                                            value={Sort.Channel}
+                                            selected={sort == Sort.Channel}
+                                        >
                                             Channel
                                         </option>
                                     </select>
@@ -126,5 +137,6 @@ export const GuildReminders = () => {
                             })}
                 </div>
             </div>
+        </>
     );
 };

reminder-dashboard/src/components/Loader/index.tsx

@@ -0,0 +1,8 @@
+export const Loader = () => (
+    <div className={"load-screen"}>
+        <div>
+            <p>Loading...</p>
+            <i className={"fa fa-cog fa-spin"}></i>
+        </div>
+    </div>
+);

web/static/css/style.css

@@ -714,6 +714,24 @@ li.highlight {
     pointer-events: none;
 }
 
+.load-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(255, 255, 255, 0.8);
+    pointer-events: none;
+    z-index: 999;
+    font-size: 2rem;
+    font-weight: bolder;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
 /* END */
 
 div.reminderError {