[ENG-1327] Loading indicator if a location is indexing (#1663)

* Loading indicator if a location is indexing

* Change check to completed_task_count rather than complete

interface/app/$libraryId/Explorer/View/index.tsx

@@ -11,12 +11,11 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { useKey, useKeys } from 'rooks';
-import { ExplorerLayout, getItemObject, useLibraryContext, type Object } from '@sd/client';
+import { ExplorerLayout, getItemObject, type Object } from '@sd/client';
 import { dialogManager, ModifierKeys } from '@sd/ui';
 import { Loader } from '~/components';
 import { useKeyCopyCutPaste, useKeyMatcher, useOperatingSystem } from '~/hooks';
 import { isNonEmpty } from '~/util';
-import { usePlatform } from '~/util/Platform';
 
 import CreateDialog from '../../settings/library/tags/CreateDialog';
 import { useExplorerContext } from '../Context';
@@ -209,8 +208,6 @@ const useKeyDownHandlers = ({ disabled }: { disabled: boolean }) => {
 	const explorer = useExplorerContext();
 
 	const os = useOperatingSystem();
-	const { library } = useLibraryContext();
-	const { openFilePaths, openEphemeralFiles } = usePlatform();
 
 	const handleNewTag = useCallback(
 		async (event: KeyboardEvent) => {

interface/app/$libraryId/location/$id.tsx

@@ -16,10 +16,10 @@ import {
 	useOnlineLocations,
 	useRspcLibraryContext
 } from '@sd/client';
-import { Tooltip } from '@sd/ui';
+import { Loader, Tooltip } from '@sd/ui';
 import { LocationIdParamsSchema } from '~/app/route-schemas';
 import { Folder } from '~/components';
-import { useKeyDeleteFile, useZodRouteParams } from '~/hooks';
+import { useIsLocationIndexing, useKeyDeleteFile, useZodRouteParams } from '~/hooks';
 
 import Explorer from '../Explorer';
 import { ExplorerContextProvider } from '../Explorer/Context';
@@ -49,6 +49,8 @@ export const Component = () => {
 	const preferences = useLibraryQuery(['preferences.get']);
 	const updatePreferences = useLibraryMutation('preferences.update');
 
+	const isLocationIndexing = useIsLocationIndexing(locationId);
+
 	const settings = useMemo(() => {
 		const defaults = createDefaultExplorerSettings<FilePathOrder>({
 			order: { field: 'name', value: 'Asc' }
@@ -144,15 +146,23 @@ export const Component = () => {
 				right={<DefaultTopBarOptions />}
 			/>
 
-			<Explorer
-				emptyNotice={
-					<EmptyNotice
-						loading={location.isFetching}
-						icon={<img className="h-32 w-32" src={getIcon(iconNames.FolderNoSpace)} />}
-						message="No files found here"
-					/>
-				}
-			/>
+			{isLocationIndexing ? (
+				<div className="flex h-full w-full items-center justify-center">
+					<Loader />
+				</div>
+			) : (
+				<Explorer
+					emptyNotice={
+						<EmptyNotice
+							loading={location.isFetching}
+							icon={
+								<img className="h-32 w-32" src={getIcon(iconNames.FolderNoSpace)} />
+							}
+							message="No files found here"
+						/>
+					}
+				/>
+			)}
 		</ExplorerContextProvider>
 	);
 };

interface/hooks/index.ts

@@ -25,3 +25,4 @@ export * from './useKeyCopyCutPaste';
 export * from './useMouseNavigate';
 export * from './useRedirectToNewLocation';
 export * from './useWindowState';
+export * from './useIsLocationIndexing';

interface/hooks/useIsLocationIndexing.ts

@@ -0,0 +1,26 @@
+import { useLibraryQuery } from '@sd/client';
+
+/*
+	This is a hook to check if a location is indexing and completed_task_count is 0.
+	We use this to display a loading indicator in the location page.
+*/
+
+export const useIsLocationIndexing = (locationId: number): boolean => {
+
+	const { data: jobGroups } = useLibraryQuery(['jobs.reports'], {
+		enabled: locationId != null,
+		refetchOnWindowFocus: false
+	});
+
+	const isLocationIndexing = jobGroups?.some(group =>
+		group.jobs.some(job => {
+			if (job.name === 'indexer' && job.metadata.location.id === locationId) {
+				return job.completed_task_count === 0
+			}
+		}
+		)
+	) || false;
+
+	return isLocationIndexing;
+}
+