Add loader
This commit is contained in:
parent
79e6498245
commit
90550dc2c7
@ -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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
8
reminder-dashboard/src/components/Loader/index.tsx
Normal file
8
reminder-dashboard/src/components/Loader/index.tsx
Normal 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>
|
||||||
|
);
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user