From 84a1d5f09a789654b27e8634b334c8c86a82b511 Mon Sep 17 00:00:00 2001
From: Keith Fung <keithrfung@users.noreply.github.com>
Date: Wed, 21 Aug 2024 15:22:47 -0400
Subject: [PATCH] Add loading (#6)

---
 src/app/files/page.tsx               |  3 ++-
 src/components/FileList/FileList.tsx | 10 +++++++++-
 src/hooks/useDriveList.ts            |  5 +++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/files/page.tsx b/src/app/files/page.tsx
index a678981..e68fbf3 100644
--- 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
index 2e81361..8b862a0 100644
--- 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
index 9470515..5d9ea16 100644
--- 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,