Add loader

This commit is contained in:
jude 2024-02-24 17:47:00 +00:00
parent 79e6498245
commit 90550dc2c7
3 changed files with 131 additions and 93 deletions

View File

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

View File

@ -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>
);

View File

@ -714,6 +714,24 @@ li.highlight {
pointer-events: none; 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 */ /* END */
div.reminderError { div.reminderError {