refactor(views): consistent loading and empty states

apps/client/src/features/rundown/RundownList.tsx

@@ -1,19 +1,24 @@
 import { memo } from 'react';
 
-import Empty from '../../common/components/state/Empty';
+import EmptyFill from '../../common/components/state/EmptyFill';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
+import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';
 
 export default memo(RundownList);
 function RundownList() {
   const { data, status, rundownMetadata } = useRundownWithMetadata();
   const featureData = useRundownEditor();
+  const { getLocalizedString } = useTranslation();
 
-  const isLoading = status !== 'success' || !data || !rundownMetadata;
+  // avoid showing the editable empty state before we know whether the rundown is actually empty
+  if (status === 'pending') {
+    return <EmptyFill text='Loading…' />;
+  }
 
-  if (isLoading) {
-    return <Empty text='Connecting to server' />;
+  if (status === 'error') {
+    return <EmptyFill text={getLocalizedString('common.no_data')} />;
   }
 
   return (

apps/client/src/features/rundown/rundown-table/RundownTable.tsx

@@ -1,6 +1,5 @@
 import { memo, useEffect, useMemo } from 'react';
 
-import EmptyPage from '../../../common/components/state/EmptyPage';
 import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
@@ -13,7 +12,7 @@ import { makeRundownColumns } from './makeRundownColumns';
 
 export default memo(RundownTable);
 function RundownTable() {
-  const { data: customFields, status: customFieldStatus } = useCustomFields();
+  const { data: customFields } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
   const source = useLoadedRundownSource();
@@ -32,16 +31,10 @@ function RundownTable() {
 
   const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
 
-  const isLoading = !customFields || customFieldStatus === 'pending';
-
   return (
     <EntryActionsProvider actions={actions}>
       <CuesheetDnd columns={columns} tableRoot='editor'>
-        {isLoading ? (
-          <EmptyPage text='Loading...' />
-        ) : (
-          <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
-        )}
+        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
       </CuesheetDnd>
     </EntryActionsProvider>
   );