Better loading in the conference schedule builder (#4377)

Author: marcoacierno

backend/custom_admin/src/components/schedule-builder/root.tsx

@@ -1,10 +1,15 @@
+import { Flex, Spinner } from "@radix-ui/themes";
+import { Suspense } from "react";
 import { Base } from "../shared/base";
 import { DjangoAdminLayout } from "../shared/django-admin-layout";
 import { useCurrentConference } from "../utils/conference";
 import { AddItemModalProvider } from "./add-item-modal/context";
 import { Calendar } from "./calendar";
 import { PendingItemsBasket } from "./pending-items-basket";
-import { useConferenceScheduleQuery } from "./schedule.generated";
+import {
+  useConferenceScheduleQuery,
+  useConferenceScheduleSuspenseQuery,
+} from "./schedule.generated";
 
 export const ScheduleBuilderRoot = ({
   conferenceId,
@@ -21,7 +26,23 @@ export const ScheduleBuilderRoot = ({
     >
       <AddItemModalProvider>
         <DjangoAdminLayout>
-          <ScheduleBuilder />
+          <Suspense
+            fallback={
+              <Flex
+                align="center"
+                justify="center"
+                width="100%"
+                height="100%"
+                position="absolute"
+                top="0"
+                left="0"
+              >
+                <Spinner size="3" />
+              </Flex>
+            }
+          >
+            <ScheduleBuilder />
+          </Suspense>
         </DjangoAdminLayout>
       </AddItemModalProvider>
     </Base>
@@ -30,30 +51,28 @@ export const ScheduleBuilderRoot = ({
 
 const ScheduleBuilder = () => {
   const { conferenceCode } = useCurrentConference();
-  const { error, loading, data } = useConferenceScheduleQuery({
+  const { error, data } = useConferenceScheduleSuspenseQuery({
     variables: {
       conferenceCode,
     },
   });
 
   const {
     conference: { days },
-  } = data ?? { conference: {} };
+  } = data;
+
+  if (error) {
+    return (
+      <h2>Something went wrong. Make sure you have the right permissions.</h2>
+    );
+  }
 
   return (
     <>
-      {loading && <h2>Please wait</h2>}
-      {!loading && error && (
-        <h2>Something went wrong. Make sure you have the right permissions.</h2>
-      )}
-      {!loading && (
-        <>
-          {days.map((day) => (
-            <Calendar key={day.id} day={day} />
-          ))}
-          <PendingItemsBasket />
-        </>
-      )}
+      {days.map((day) => (
+        <Calendar key={day.id} day={day} />
+      ))}
+      <PendingItemsBasket />
     </>
   );
 };