better loading spinners

This commit is contained in:
2024-09-23 13:20:03 -06:00
parent ccaaad1fe4
commit dcc2ca9099
2 changed files with 24 additions and 7 deletions

View File

@@ -153,8 +153,16 @@ function AssignmentButtons({
}) { }) {
const { courseName } = useCourseContext(); const { courseName } = useCourseContext();
const { data: settings } = useLocalCourseSettingsQuery(); const { data: settings } = useLocalCourseSettingsQuery();
const { data: canvasAssignments } = useCanvasAssignmentsQuery(); const {
const { data: assignment } = useAssignmentQuery(moduleName, assignmentName); data: canvasAssignments,
isPending: canvasIsPending,
isRefetching: canvasIsRefetching,
} = useCanvasAssignmentsQuery();
const {
data: assignment,
isPending: assignmentIsPending,
isRefetching,
} = useAssignmentQuery(moduleName, assignmentName);
const addToCanvas = useAddAssignmentToCanvasMutation(); const addToCanvas = useAddAssignmentToCanvasMutation();
const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation(); const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
const updateAssignment = useUpdateAssignmentInCanvasMutation(); const updateAssignment = useUpdateAssignmentInCanvasMutation();
@@ -162,15 +170,23 @@ function AssignmentButtons({
const assignmentInCanvas = canvasAssignments.find( const assignmentInCanvas = canvasAssignments.find(
(a) => a.name === assignmentName (a) => a.name === assignmentName
); );
const anythingIsLoading =
addToCanvas.isPending ||
canvasIsPending ||
assignmentIsPending ||
isRefetching ||
canvasIsRefetching ||
deleteFromCanvas.isPending ||
updateAssignment.isPending;
return ( return (
<div className="p-5 flex flex-row justify-between gap-3"> <div className="p-5 flex flex-row justify-between gap-3">
<div> <div>
<button onClick={toggleHelp}>Toggle Help</button> <button onClick={toggleHelp}>Toggle Help</button>
</div> </div>
<div className="flex flex-row gap-3 justify-end"> <div className="flex flex-row gap-3 justify-end">
{(addToCanvas.isPending || {anythingIsLoading && <Spinner />}
deleteFromCanvas.isPending ||
updateAssignment.isPending) && <Spinner />}
{assignmentInCanvas && !assignmentInCanvas.published && ( {assignmentInCanvas && !assignmentInCanvas.published && (
<div className="text-rose-300 my-auto">Not Published</div> <div className="text-rose-300 my-auto">Not Published</div>
)} )}

View File

@@ -6,10 +6,11 @@ export function makeQueryClient() {
queries: { queries: {
// With SSR, we usually want to set some default staleTime // With SSR, we usually want to set some default staleTime
// above 0 to avoid refetching immediately on the client // above 0 to avoid refetching immediately on the client
staleTime: 60_000, // staleTime: 60_000,
staleTime: 1000 * 60 * 60, // 1 hour
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
retry: 0, retry: 0,
refetchOnMount: false refetchOnMount: false,
}, },
}, },
}); });