From 90550dc2c7f7ada3171179cc9ca7783618f13f81 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sat, 24 Feb 2024 17:47:00 +0000
Subject: [PATCH] Add loader

---
 .../src/components/Guild/GuildReminders.tsx   | 198 ++++++++++--------
 .../src/components/Loader/index.tsx           |   8 +
 web/static/css/style.css                      |  18 ++
 3 files changed, 131 insertions(+), 93 deletions(-)
 create mode 100644 reminder-dashboard/src/components/Loader/index.tsx

diff --git a/reminder-dashboard/src/components/Guild/GuildReminders.tsx b/reminder-dashboard/src/components/Guild/GuildReminders.tsx
index f67dfe6..d4dcb0e 100644
--- a/reminder-dashboard/src/components/Guild/GuildReminders.tsx
+++ b/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,108 +29,114 @@ export const GuildReminders = () => {
     let prevReminder = null;
 
     return (
-        <div style={{ margin: "0 12px 12px 12px" }}>
-            <strong>Create Reminder</strong>
-            <div id={"reminderCreator"}>
-                <CreateReminder />
-            </div>
-            <br></br>
-            <div class={"field"}>
-                <div class={"columns is-mobile"}>
-                    <div class={"column"}>
-                        <strong>Reminders</strong>
-                    </div>
-                    <div class={"column is-narrow"}>
-                        <div class="control has-icons-left">
-                            <div class="select is-small">
-                                <select
-                                    id="orderBy"
-                                    onInput={(ev) => {
-                                        setSort(ev.currentTarget.value as Sort);
-                                    }}
-                                >
-                                    <option value={Sort.Time} selected={sort == Sort.Time}>
-                                        Time
-                                    </option>
-                                    <option value={Sort.Name} selected={sort == Sort.Name}>
-                                        Name
-                                    </option>
-                                    <option value={Sort.Channel} selected={sort == Sort.Channel}>
-                                        Channel
-                                    </option>
-                                </select>
-                            </div>
-                            <div class="icon is-small is-left">
-                                <i class="fas fa-sort-amount-down"></i>
+        <>
+            {!isFetched && <Loader />}
+            <div style={{ margin: "0 12px 12px 12px" }}>
+                <strong>Create Reminder</strong>
+                <div id={"reminderCreator"}>
+                    <CreateReminder />
+                </div>
+                <br></br>
+                <div class={"field"}>
+                    <div class={"columns is-mobile"}>
+                        <div class={"column"}>
+                            <strong>Reminders</strong>
+                        </div>
+                        <div class={"column is-narrow"}>
+                            <div class="control has-icons-left">
+                                <div class="select is-small">
+                                    <select
+                                        id="orderBy"
+                                        onInput={(ev) => {
+                                            setSort(ev.currentTarget.value as Sort);
+                                        }}
+                                    >
+                                        <option value={Sort.Time} selected={sort == Sort.Time}>
+                                            Time
+                                        </option>
+                                        <option value={Sort.Name} selected={sort == Sort.Name}>
+                                            Name
+                                        </option>
+                                        <option
+                                            value={Sort.Channel}
+                                            selected={sort == Sort.Channel}
+                                        >
+                                            Channel
+                                        </option>
+                                    </select>
+                                </div>
+                                <div class="icon is-small is-left">
+                                    <i class="fas fa-sort-amount-down"></i>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class={"column is-narrow"}>
-                        <div class="control has-icons-left">
-                            <div class="select is-small">
-                                <select
-                                    id="expandAll"
-                                    onInput={(ev) => {
-                                        if (ev.currentTarget.value === "expand") {
-                                            setCollapsed(false);
-                                        } else if (ev.currentTarget.value === "collapse") {
-                                            setCollapsed(true);
-                                        }
-                                    }}
-                                >
-                                    <option value="" selected></option>
-                                    <option value="expand">Expand All</option>
-                                    <option value="collapse">Collapse All</option>
-                                </select>
-                            </div>
-                            <div class="icon is-small is-left">
-                                <i class="fas fa-expand-arrows"></i>
+                        <div class={"column is-narrow"}>
+                            <div class="control has-icons-left">
+                                <div class="select is-small">
+                                    <select
+                                        id="expandAll"
+                                        onInput={(ev) => {
+                                            if (ev.currentTarget.value === "expand") {
+                                                setCollapsed(false);
+                                            } else if (ev.currentTarget.value === "collapse") {
+                                                setCollapsed(true);
+                                            }
+                                        }}
+                                    >
+                                        <option value="" selected></option>
+                                        <option value="expand">Expand All</option>
+                                        <option value="collapse">Collapse All</option>
+                                    </select>
+                                </div>
+                                <div class="icon is-small is-left">
+                                    <i class="fas fa-expand-arrows"></i>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div id={"guildReminders"} className={isFetching ? "loading" : ""}>
-                {isSuccess &&
-                    guildReminders
-                        .sort((r1, r2) => {
-                            if (sort === Sort.Time) {
-                                return r1.utc_time > r2.utc_time ? 1 : -1;
-                            } else if (sort === Sort.Name) {
-                                return r1.name > r2.name ? 1 : -1;
-                            } else {
-                                return r1.channel > r2.channel ? 1 : -1;
-                            }
-                        })
-                        .map((reminder) => {
-                            let breaker = <></>;
-                            if (sort === Sort.Channel && channels) {
-                                if (
-                                    prevReminder === null ||
-                                    prevReminder.channel !== reminder.channel
-                                ) {
-                                    const channel = channels.find(
-                                        (ch) => ch.id === reminder.channel,
-                                    );
-                                    breaker = <div class={"channel-tag"}>#{channel.name}</div>;
+                <div id={"guildReminders"} className={isFetching ? "loading" : ""}>
+                    {isSuccess &&
+                        guildReminders
+                            .sort((r1, r2) => {
+                                if (sort === Sort.Time) {
+                                    return r1.utc_time > r2.utc_time ? 1 : -1;
+                                } else if (sort === Sort.Name) {
+                                    return r1.name > r2.name ? 1 : -1;
+                                } else {
+                                    return r1.channel > r2.channel ? 1 : -1;
+                                }
+                            })
+                            .map((reminder) => {
+                                let breaker = <></>;
+                                if (sort === Sort.Channel && channels) {
+                                    if (
+                                        prevReminder === null ||
+                                        prevReminder.channel !== reminder.channel
+                                    ) {
+                                        const channel = channels.find(
+                                            (ch) => ch.id === reminder.channel,
+                                        );
+                                        breaker = <div class={"channel-tag"}>#{channel.name}</div>;
+                                    }
                                 }
-                            }
 
-                            prevReminder = reminder;
+                                prevReminder = reminder;
 
-                            return (
-                                <>
-                                    {breaker}
-                                    <EditReminder
-                                        key={reminder.uid}
-                                        reminder={reminder}
-                                        globalCollapse={collapsed}
-                                    />
-                                </>
-                            );
-                        })}
+                                return (
+                                    <>
+                                        {breaker}
+                                        <EditReminder
+                                            key={reminder.uid}
+                                            reminder={reminder}
+                                            globalCollapse={collapsed}
+                                        />
+                                    </>
+                                );
+                            })}
+                </div>
             </div>
-        </div>
+        </>
     );
 };
diff --git a/reminder-dashboard/src/components/Loader/index.tsx b/reminder-dashboard/src/components/Loader/index.tsx
new file mode 100644
index 0000000..6e95999
--- /dev/null
+++ b/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>
+);
diff --git a/web/static/css/style.css b/web/static/css/style.css
index 71d329d..477d506 100644
--- a/web/static/css/style.css
+++ b/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 {