[ENG-1020] Explorer loading indicator (spacedriveapp#1318)

* loading indicator * cleanup tw
PatentLobster · Sep 8, 2023 · 2111d35 · 2111d35
1 parent d435141
commit 2111d35
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 1 deletion.
diff --git a/interface/app/$libraryId/Explorer/View/index.tsx b/interface/app/$libraryId/Explorer/View/index.tsx
@@ -25,6 +25,7 @@ import {
 	useLibraryMutation
 } from '@sd/client';
 import { ContextMenu, ModifierKeys, dialogManager, toast } from '@sd/ui';
+import { Loader } from '~/components';
 import { useOperatingSystem } from '~/hooks';
 import { isNonEmpty } from '~/util';
 import { usePlatform } from '~/util/Platform';
@@ -206,11 +207,19 @@ export default memo(({ className, style, emptyNotice, ...contextProps }: Explore
 
 	const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
 	const [isRenaming, setIsRenaming] = useState(false);
+	const [showLoading, setShowLoading] = useState(false);
 
 	useKeyDownHandlers({
 		disabled: isRenaming || quickPreviewStore.open
 	});
 
+	useEffect(() => {
+		if (explorer.isFetchingNextPage) {
+			const timer = setTimeout(() => setShowLoading(true), 100);
+			return () => clearTimeout(timer);
+		} else setShowLoading(false);
+	}, [explorer.isFetchingNextPage]);
+
 	return (
 		<>
 			<div
@@ -241,6 +250,9 @@ export default memo(({ className, style, emptyNotice, ...contextProps }: Explore
 						{layoutMode === 'grid' && <GridView />}
 						{layoutMode === 'list' && <ListView />}
 						{layoutMode === 'media' && <MediaView />}
+						{showLoading && (
+							<Loader className="fixed bottom-10 left-0 w-[calc(100%+180px)]" />
+						)}
 					</ViewContext.Provider>
 				) : (
 					emptyNotice

diff --git a/interface/app/$libraryId/Explorer/useExplorer.ts b/interface/app/$libraryId/Explorer/useExplorer.ts
@@ -32,6 +32,7 @@ export interface UseExplorerProps<TOrder extends Ordering> {
 	count?: number;
 	parent?: ExplorerParent;
 	loadMore?: () => void;
+	isFetchingNextPage?: boolean;
 	scrollRef?: RefObject<HTMLDivElement>;
 	/**
 	 * @defaultValue `true`

diff --git a/interface/app/$libraryId/location/$id.tsx b/interface/app/$libraryId/location/$id.tsx
@@ -76,12 +76,13 @@ export const Component = () => {
 		orderingKeys: filePathOrderingKeysSchema
 	});
 
-	const { items, count, loadMore } = useItems({ locationId, settings: explorerSettings });
+	const { items, count, loadMore, query } = useItems({ locationId, settings: explorerSettings });
 
 	const explorer = useExplorer({
 		items,
 		count,
 		loadMore,
+		isFetchingNextPage: query.isFetchingNextPage,
 		settings: explorerSettings,
 		...(location.data && {
 			parent: { type: 'Location', location: location.data }

diff --git a/interface/components/Loader.tsx b/interface/components/Loader.tsx
@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import { Puff } from 'react-loading-icons';
+import { useIsDark } from '~/hooks';
+
+interface Props {
+	className?: string;
+	color?: string;
+}
+
+export function Loader({ className }: Props) {
+	const isDark = useIsDark();
+	return (
+		<Puff
+			stroke={isDark ? '#2599FF' : '#303136'}
+			strokeOpacity={4}
+			strokeWidth={5}
+			speed={1}
+			className={clsx('h-7 w-7', className)}
+		/>
+	);
+}
diff --git a/interface/components/index.ts b/interface/components/index.ts
@@ -10,3 +10,4 @@ export * from './TextViewer';
 export * from './PasswordMeter';
 export * from './SubtleButton';
 export * from './TrafficLights';
+export * from './Loader';