mirror of
https://github.com/alexmickelson/canvasManagement.git
synced 2026-03-27 07:58:31 -06:00
better loading spinners
This commit is contained in:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user