Add loading (#6)

InfernoRed · Aug 21, 2024 · 84a1d5f · 84a1d5f
1 parent 76d5a99
commit 84a1d5f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/app/files/page.tsx b/src/app/files/page.tsx
@@ -10,6 +10,7 @@ import { mimeTypeFilters, sortOptions } from "../lib/definitions";
 
 export default function FilesPage() {
   const {
+    loading,
     searchTerm,
     handleSearch,
     filter,
@@ -44,7 +45,7 @@ export default function FilesPage() {
           className="border rounded p-2"
         />
       </div>
-      <FileList files={files} missingText="No files found" />
+      <FileList files={files} missingText="No files found" loading={loading} />
     </div>
   );
 }
diff --git a/src/components/FileList/FileList.tsx b/src/components/FileList/FileList.tsx
@@ -4,9 +4,17 @@ import FileListItem from "./FileListItem";
 export interface FileListProps {
   files: GoogleDriveFile[];
   missingText: string;
+  loading?: boolean;
 }
 
-export default function FileList({ files, missingText }: FileListProps) {
+export default function FileList({
+  files,
+  missingText,
+  loading,
+}: FileListProps) {
+  if (loading) {
+    return <p className="text-center text-gray-500">Loading...</p>;
+  }
   return (
     <div>
       {files.length === 0 ? (

diff --git a/src/hooks/useDriveList.ts b/src/hooks/useDriveList.ts
@@ -14,6 +14,7 @@ const DEFAULT_SORT: SortOption = "name";
 const SEARCH_DEBOUNCE_TIME = 2000;
 
 export default function useDriveList() {
+  const [loading, setLoading] = useState(false);
   const [files, setFiles] = useState<GoogleDriveFile[]>([]);
   const [error, setError] = useState<string>();
   const [searchTerm, setSearchTerm] = useState<string>();
@@ -24,6 +25,7 @@ export default function useDriveList() {
   useEffect(() => {
     const getFiles = async () => {
       try {
+        setLoading(true);
         const queryParams = new URLSearchParams();
         if (hiddenSearchTerm) queryParams.append("search", hiddenSearchTerm);
         if (filter && filter !== "all")
@@ -39,6 +41,8 @@ export default function useDriveList() {
         setError(undefined);
       } catch (error) {
         setError((error as Error)?.message);
+      } finally {
+        setLoading(false);
       }
     };
 
@@ -68,6 +72,7 @@ export default function useDriveList() {
   };
 
   return {
+    loading,
     searchTerm,
     handleSearch,
     filter,