refactor: useSuspenseQuery for project list

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

@@ -1,24 +1,18 @@
-import { useQuery } from '@tanstack/react-query';
-import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { ProjectFile, ProjectFileList } from 'ontime-types';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
 import { useMemo } from 'react';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_LIST } from '../api/constants';
 import { getProjects } from '../api/db';
 
-const placeholderProjectList: ProjectFileListResponse = {
-  files: [],
-  lastLoadedProject: '',
-};
-
-function useProjectList() {
-  const { data, status, refetch } = useQuery({
+export function useProjectList() {
+  const { data, status, refetch } = useSuspenseQuery({
     queryKey: PROJECT_LIST,
     queryFn: ({ signal }) => getProjects({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
+    staleTime: MILLIS_PER_HOUR,
   });
-  return { data: data ?? placeholderProjectList, status, refetch };
+  return { data, status, refetch };
 }
 
 export type ProjectSortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'modified-asc' | 'modified-desc';

apps/client/src/common/utils/socket.ts

@@ -216,6 +216,9 @@ export const connectSocket = () => {
             case RefetchKey.ProjectRundowns:
               ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
               break;
+            case RefetchKey.ProjectFiles:
+              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
+              break;
             default: {
               target satisfies never;
               break;

apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { IoArrowDown, IoArrowUp } from 'react-icons/io5';
 
 import Info from '../../../../common/components/info/Info';
@@ -11,11 +11,25 @@ import style from './ProjectPanel.module.scss';
 type SortParameter = 'alphabetical' | 'modified';
 
 export default function ProjectList() {
+  return (
+    <Suspense
+      fallback={
+        <div className={style.empty}>
+          <Panel.Loader isLoading />
+        </div>
+      }
+    >
+      <ProjectListSuspend />
+    </Suspense>
+  );
+}
+
+function ProjectListSuspend() {
   const [editingMode, setEditingMode] = useState<EditMode | null>(null);
   const [editingFilename, setEditingFilename] = useState<string | null>(null);
   const [sortMode, setSortMode] = useState<ProjectSortMode>('modified-desc');
 
-  const { data, refetch, status } = useOrderedProjectList(sortMode);
+  const { data, refetch } = useOrderedProjectList(sortMode);
 
   const handleToggleEditMode = (editMode: EditMode, filename: string | null) => {
     setEditingMode((prev) => (prev === editMode && filename === editingFilename ? null : editMode));
@@ -38,14 +52,6 @@ export default function ProjectList() {
     });
   };
 
-  if (status === 'pending') {
-    return (
-      <div className={style.empty}>
-        <Panel.Loader isLoading />
-      </div>
-    );
-  }
-
   const numProjects = data.reorderedProjectFiles.length;
 
   return (