refactor: useSuspenseQuery for rundown list

apps/client/src/common/hooks-query/useProjectRundowns.ts

@@ -1,7 +1,7 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import { ProjectRundownsList } from 'ontime-types';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
 import {
   createRundown,
@@ -11,24 +11,21 @@ import {
   loadRundown,
   renameRundown,
 } from '../api/rundown';
+import { ontimeQueryClient } from '../queryClient';
 
-//TODO: make suspends so we don't have to deal with no value all over
 /**
  * Project rundowns
  */
 export function useProjectRundowns() {
-  const { data, status, isError, refetch, isFetching } = useQuery<ProjectRundownsList>({
+  const { data, status, isError, refetch, isFetching } = useSuspenseQuery<ProjectRundownsList>({
     queryKey: PROJECT_RUNDOWNS,
     queryFn: ({ signal }) => fetchProjectRundownList({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
+    staleTime: MILLIS_PER_HOUR,
-    refetchInterval: queryRefetchIntervalSlow,
   });
-  return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
+  return { data, status, isError, refetch, isFetching };
 }
 
 export function useMutateProjectRundowns() {
-  const ontimeQueryClient = useQueryClient();
-
   const { mutateAsync: create } = useMutation({
     mutationFn: createRundown,
     onMutate: () => {

apps/client/src/features/app-settings/panel/manage-panel/ManageRundowns.tsx

@@ -1,5 +1,5 @@
 import { useDisclosure } from '@mantine/hooks';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import {
   IoAdd,
   IoDocumentOutline,
@@ -28,6 +28,20 @@ import { ManageRundownForm } from './ManageRundownForm';
 import style from './ManagePanel.module.scss';
 
 export default function ManageRundowns() {
+  return (
+    <Suspense
+      fallback={
+        <div className={style.empty}>
+          <Panel.Loader isLoading />
+        </div>
+      }
+    >
+      <ManageRundownsSuspends />
+    </Suspense>
+  );
+}
+
+function ManageRundownsSuspends() {
   const { data } = useProjectRundowns();
   const { duplicate, remove, load, rename } = useMutateProjectRundowns();
   const [isOpenDelete, deleteHandlers] = useDisclosure();

apps/client/src/features/overview/OverviewWrapper.tsx

@@ -1,9 +1,10 @@
 import { ErrorBoundary } from '@sentry/react';
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Suspense } from 'react';
 
 import ScrollArea from '../../common/components/scroll-area/ScrollArea';
 import { useIsOnline } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
+import Loader from '../../views/common/loader/Loader';
 
 import style from './Overview.module.scss';
 
@@ -15,18 +16,37 @@ export function OverviewWrapper({ navElements, children }: PropsWithChildren<Ove
   const isOnline = useIsOnline();
 
   return (
-    <div className={cx([style.overview, !isOnline && style.isOffline])}>
+    <Suspense fallback={<OverviewFallback navElements={navElements} />}>
-      <ErrorBoundary>
+      <div className={cx([style.overview, !isOnline && style.isOffline])}>
-        <div className={style.nav}>{navElements}</div>
+        <ErrorBoundary>
-        <ScrollArea
+          <div className={style.nav}>{navElements}</div>
-          className={style.infoScroll}
+          <ScrollArea
-          contentClassName={style.info}
+            className={style.infoScroll}
-          contentStyle={{ minWidth: '100%' }}
+            contentClassName={style.info}
-          orientation='horizontal'
+            contentStyle={{ minWidth: '100%' }}
-        >
+            orientation='horizontal'
-          {children}
+          >
-        </ScrollArea>
+            {children}
-      </ErrorBoundary>
+          </ScrollArea>
+        </ErrorBoundary>
+      </div>
+    </Suspense>
+  );
+}
+
+function OverviewFallback({ navElements }: OverviewWrapperProps) {
+  return (
+    <div className={style.overview}>
+      <div className={style.nav}>{navElements}</div>
+      <ScrollArea
+        className={style.infoScroll}
+        contentClassName={style.info}
+        contentStyle={{ minWidth: '100%' }}
+        orientation='horizontal'
+      >
+        {/* TODO: this could be alined in a nicer way */}
+        <Loader />
+      </ScrollArea>
     </div>
   );
 }