From dcc2ca90999fa626cca3f6f76a248e1d56fb861d Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Mon, 23 Sep 2024 13:20:03 -0600
Subject: [PATCH] better loading spinners

---
 .../[assignmentName]/EditAssignment.tsx       | 26 +++++++++++++++----
 nextjs/src/app/providersQueryClientUtils.ts   |  5 ++--
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
index 68f19bd..deba104 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -153,8 +153,16 @@ function AssignmentButtons({
 }) {
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
-  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
-  const { data: assignment } = useAssignmentQuery(moduleName, assignmentName);
+  const {
+    data: canvasAssignments,
+    isPending: canvasIsPending,
+    isRefetching: canvasIsRefetching,
+  } = useCanvasAssignmentsQuery();
+  const {
+    data: assignment,
+    isPending: assignmentIsPending,
+    isRefetching,
+  } = useAssignmentQuery(moduleName, assignmentName);
   const addToCanvas = useAddAssignmentToCanvasMutation();
   const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
   const updateAssignment = useUpdateAssignmentInCanvasMutation();
@@ -162,15 +170,23 @@ function AssignmentButtons({
   const assignmentInCanvas = canvasAssignments.find(
     (a) => a.name === assignmentName
   );
+
+  const anythingIsLoading =
+    addToCanvas.isPending ||
+    canvasIsPending ||
+    assignmentIsPending ||
+    isRefetching ||
+    canvasIsRefetching ||
+    deleteFromCanvas.isPending ||
+    updateAssignment.isPending;
+    
   return (
     <div className="p-5 flex flex-row justify-between gap-3">
       <div>
         <button onClick={toggleHelp}>Toggle Help</button>
       </div>
       <div className="flex flex-row gap-3 justify-end">
-        {(addToCanvas.isPending ||
-          deleteFromCanvas.isPending ||
-          updateAssignment.isPending) && <Spinner />}
+        {anythingIsLoading && <Spinner />}
         {assignmentInCanvas && !assignmentInCanvas.published && (
           <div className="text-rose-300 my-auto">Not Published</div>
         )}
diff --git a/nextjs/src/app/providersQueryClientUtils.ts b/nextjs/src/app/providersQueryClientUtils.ts
index 6ce4a3d..0dceebc 100644
--- a/nextjs/src/app/providersQueryClientUtils.ts
+++ b/nextjs/src/app/providersQueryClientUtils.ts
@@ -6,10 +6,11 @@ export function makeQueryClient() {
       queries: {
         // With SSR, we usually want to set some default staleTime
         // above 0 to avoid refetching immediately on the client
-        staleTime: 60_000,
+        // staleTime: 60_000,
+        staleTime: 1000 * 60 * 60, // 1 hour
         refetchOnWindowFocus: false,
         retry: 0,
-        refetchOnMount: false
+        refetchOnMount: false,
       },
     },
   });