From 9ec4976b319d7f37ef05ce5a4bca47e669fe83ba Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Thu, 6 Mar 2025 18:43:09 -0700
Subject: [PATCH] FIX: Spinner for the downloads.

---
 frontend/src/components/DownloadLoading.jsx | 18 ++++++++++++++++++
 frontend/src/pages/Dashboard.jsx            |  9 +++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 frontend/src/components/DownloadLoading.jsx

diff --git a/frontend/src/components/DownloadLoading.jsx b/frontend/src/components/DownloadLoading.jsx
new file mode 100644
index 0000000..1dc06e0
--- /dev/null
+++ b/frontend/src/components/DownloadLoading.jsx
@@ -0,0 +1,18 @@
+import "../index.css"
+
+/**
+ * Simple loading spinner for the downloads.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function DownloadLoading() {
+    return (
+        <div className="absolute size-full flex items-center justify-center">
+            <div className="fixed inset-0 bg-black opacity-25 blur-lg"></div>
+            <div
+                className="animate-spin rounded-full border-blue-500 border-3 border-t-transparent size-6 mx-2">
+            </div>
+            <p className="text-lg text-black opacity-90">Preparing files...</p>
+        </div>
+    );
+};
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 2f9eacd..08c1d36 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -6,6 +6,7 @@ import Navbar from "../components/Navbar.jsx";
 import Error from "../components/Error.jsx";
 import Editor from "../components/Editor.jsx";
 import ChildrenLoading from "../components/ChildrenLoading.jsx";
+import DownloadLoading from "../components/DownloadLoading.jsx";
 
 export default function Dashboard() {
     // Store the default path
@@ -28,6 +29,7 @@ export default function Dashboard() {
     const [error, setError] = useState(null);
     const [editing, setEditing] = useState("");
     const [childrenLoading, setChildrenLoading] = useState(false);
+    const [downloadLoading, setDownloadLoading] = useState(false);
     const navigate = useNavigate();
 
 
@@ -149,6 +151,7 @@ export default function Dashboard() {
         // Do not allow empty downloads
         if (selected.length === 0) {
             setError("Please select files/directories to download.");
+            return
         }
 
         const download = async (paths) => {
@@ -180,6 +183,9 @@ export default function Dashboard() {
                 console.error(`Download error: ${err}`);
             }
         };
+
+        setDownloadLoading(true);
+
         const targets = [];
         selected.forEach((file) => {
             targets.push(`/${path.join("/")}/${file}`);
@@ -188,6 +194,8 @@ export default function Dashboard() {
         // TODO: Implement UI for errors
         download(targets).catch((err) => {
             setError(`Download error: ${err}.`)
+        }).finally(() => {
+            setDownloadLoading(false)
         });
     };
 
@@ -275,6 +283,7 @@ export default function Dashboard() {
         <div className="w-full min-h-screen h-screen pb-8">
             <Navbar downloadFiles={downloadFiles}/>
             <div className="h-full w-full flex flex-col items-center justify-center pb-8">
+                {downloadLoading && <DownloadLoading/>}
 
                 {error && <Error error={error} clear={clearError}/>}
                 {(editing !== "" && !error) &&