refactor: useSuspenseQuery for project list

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

@@ -1,24 +1,18 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
-import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types';
+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 = {
+export function useProjectList() {
-  files: [],
+  const { data, status, refetch } = useSuspenseQuery({
-  lastLoadedProject: '',
-};
-
-function useProjectList() {
-  const { data, status, refetch } = useQuery({
     queryKey: PROJECT_LIST,
     queryFn: ({ signal }) => getProjects({ signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
+    staleTime: MILLIS_PER_HOUR,
-    refetchInterval: queryRefetchIntervalSlow,
   });
-  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 (

apps/server/src/services/project-service/ProjectService.ts

@@ -1,9 +1,10 @@
 import { copyFile } from 'fs/promises';
 import { join } from 'path';
 
-import { DatabaseModel, LogOrigin, ProjectFileListResponse } from 'ontime-types';
+import { DatabaseModel, LogOrigin, ProjectFileListResponse, RefetchKey } from 'ontime-types';
 import { getErrorMessage, getFirstRundown } from 'ontime-utils';
 
+import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { parseCustomFields } from '../../api-data/custom-fields/customFields.parser.js';
 import { parseDatabaseModel } from '../../api-data/db/db.parser.js';
 import { getCurrentRundown } from '../../api-data/rundown/rundown.dao.js';
@@ -72,6 +73,9 @@ export async function getCurrentProject(): Promise<{ filename: string; pathToFil
   // we know the project is loaded since we force initialisation above
   const pathToFile = getPathToProject(currentProjectState.currentProjectName as string);
 
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return { filename: currentProjectState.currentProjectName as string, pathToFile };
 }
 
@@ -105,6 +109,9 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
     currentProjectName: fileName,
   };
 
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return fileName;
 }
 
@@ -113,6 +120,9 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
  */
 export async function loadDemoProject(): Promise<string> {
   populateOntimeLogo();
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return createProject(config.demoProject, demoDb);
 }
 
@@ -122,6 +132,9 @@ export async function loadDemoProject(): Promise<string> {
  */
 async function loadNewProject(): Promise<string> {
   const emptyProject = makeNewProject();
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return createProject(config.newProject, emptyProject);
 }
 
@@ -142,6 +155,9 @@ async function handleCorruptedFile(filePath: string, fileName: string): Promise<
   // and make a new file with the recovered data
   const newPath = appendToName(filePath, '(recovered)');
   await dockerSafeRename(filePath, newPath);
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return getFileNameFromPath(newPath);
 }
 
@@ -162,6 +178,9 @@ async function handleMigratedFile(filePath: string, fileName: string): Promise<s
   // and make a new file with the migrated data
   const newPath = appendToName(filePath, '(migrated)');
   await dockerSafeRename(filePath, newPath);
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return getFileNameFromPath(newPath);
 }
 
@@ -200,6 +219,9 @@ export async function initialiseProject(): Promise<string> {
     }
   }
 
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return loadNewProject();
 }
 
@@ -231,6 +253,10 @@ export async function loadProjectFile(
   }
 
   const projectName = await loadProject(result.data, parsedFileName, options?.rundownId);
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return projectName;
 }
 
@@ -241,6 +267,9 @@ export async function getProjectList(): Promise<ProjectFileListResponse> {
   const files = await getProjectFiles();
   const lastLoaded = await getLastLoaded();
 
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return {
     files,
     lastLoadedProject: lastLoaded?.projectName ? removeFileExtension(lastLoaded?.projectName) : '',
@@ -263,6 +292,10 @@ export async function duplicateProjectFile(originalFile: string, newFilename: st
 
   const pathToDuplicate = getPathToProject(newFilename);
   await copyFile(projectFilePath, pathToDuplicate);
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return;
 }
 
@@ -291,8 +324,16 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
     const projectData = parseDatabaseModel(fileData);
 
     const newFileName = await loadProject(projectData.data, newFilename);
+
+    setImmediate(() => {
+      sendRefetch(RefetchKey.ProjectFiles);
+    });
     return newFileName;
   }
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return newFilename;
 }
 
@@ -304,6 +345,10 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
 export async function createProject(fileName: string, initialData: DatabaseModel): Promise<string> {
   const fileNameWithExtension = generateUniqueFileName(publicDir.projectsDir, ensureJsonExtension(fileName));
   await loadProject(initialData, fileNameWithExtension);
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return fileNameWithExtension;
 }
 
@@ -315,6 +360,10 @@ export async function createProject(fileName: string, initialData: DatabaseModel
 export async function createProjectWithPatch(fileName: string, initialData: Partial<DatabaseModel>): Promise<string> {
   const newProject = makeNewProject();
   const sanitisedData = safeMerge(newProject, initialData);
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return createProject(fileName, sanitisedData);
 }
 
@@ -331,6 +380,9 @@ export async function deleteProjectFile(filename: string) {
     throw new Error('Project file not found');
   }
 
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   await deleteFile(projectFilePath);
 }
 
@@ -375,5 +427,9 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
   }
 
   const updatedData = await getDataProvider().getData();
+
+  setImmediate(() => {
+    sendRefetch(RefetchKey.ProjectFiles);
+  });
   return updatedData;
 }

packages/types/src/api/websocket/refetch.type.ts

@@ -1,6 +1,7 @@
 export enum RefetchKey {
   All = 'all',
   CustomFields = 'custom-fields',
+  ProjectFiles = 'project-files',
   ProjectData = 'project-data',
   ProjectRundowns = 'project-rundowns',
   Report = 'report',