From d36902a8659899f934608774fcc426046e71d8cb Mon Sep 17 00:00:00 2001
From: Jaydin_MacBook <74679492+TheManWhoLikesToCode@users.noreply.github.com>
Date: Mon, 22 Jan 2024 10:23:08 -0500
Subject: [PATCH] Added Loading Screen

Added loading screen by adding forgotten html and center the text by switching from block to flex
---
 frontend/static/default.css      |  2 +-
 frontend/static/scripts.js       |  4 +--
 frontend/templates/userPage.html | 52 +++++++++++++++++++-------------
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/frontend/static/default.css b/frontend/static/default.css
index 3ea7863..c57876f 100755
--- a/frontend/static/default.css
+++ b/frontend/static/default.css
@@ -10384,4 +10384,4 @@ footer h5 {
   .switcher-wrap {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/static/scripts.js b/frontend/static/scripts.js
index 8e1b414..e3ed764 100755
--- a/frontend/static/scripts.js
+++ b/frontend/static/scripts.js
@@ -91,7 +91,7 @@ const app = (() => {
   const showLoadingScreen = () => {
     const loadingScreen = document.getElementById("loading-screen");
     if (loadingScreen) {
-      loadingScreen.style.display = "block";
+      loadingScreen.style.display = "flex";
     }
   };
 
@@ -128,8 +128,6 @@ const app = (() => {
     const password = document.getElementById("password").value;
     const responseContainer = document.getElementById("response-container");
 
-    showLoadingScreen();
-
     try {
       const response = await fetchWithErrorHandler(`${apiUrl}/login`, {
         method: "POST",
diff --git a/frontend/templates/userPage.html b/frontend/templates/userPage.html
index 0a081a4..14d05cd 100644
--- a/frontend/templates/userPage.html
+++ b/frontend/templates/userPage.html
@@ -48,31 +48,30 @@
         </div>
     </section>
 
-<!-- Archive Section -->
-<!-- Archive Section -->
-<section class="py-7 py-md-0 bg-hero" id="archive">
-    <div class="container">
-        <div class="row vh-md-100 align-items-center">
-            <div class="col-md-8 col-sm-10 col-12 mx-auto">
-                <h1 class="heading-black text-capitalize text-center">
-                    Archive with Archive-Me
-                </h1>
-                <p class="lead py-3 text-center">
-                    Utilize Archive-Me to manage and organize your digital resources effectively.
-                </p>
-                <!-- Archive Box -->
-                <div class="archive-box bg-dark p-4 rounded shadow text-white">
-                    <h4 class="text-left">You are Logged In</h4>
-                    <p class="text-left">Access and manage your archived courses and resources with ease.</p>
-                    <div class="text-left">
-                        <button type="button" class="btn btn-primary" id="archiveButton">Archive Courses</button>
-                        <button type="button" class="btn btn-secondary" id="downloadButton">Download</button>
+    <!-- Archive Section -->
+    <section class="py-7 py-md-0 bg-hero" id="archive">
+        <div class="container">
+            <div class="row vh-md-100 align-items-center">
+                <div class="col-md-8 col-sm-10 col-12 mx-auto">
+                    <h1 class="heading-black text-capitalize text-center">
+                        Archive with Archive-Me
+                    </h1>
+                    <p class="lead py-3 text-center">
+                        Utilize Archive-Me to manage and organize your digital resources effectively.
+                    </p>
+                    <!-- Archive Box -->
+                    <div class="archive-box bg-dark p-4 rounded shadow text-white">
+                        <h4 class="text-left">You are Logged In</h4>
+                        <p class="text-left">Access and manage your archived courses and resources with ease.</p>
+                        <div class="text-left">
+                            <button type="button" class="btn btn-primary" id="archiveButton">Archive Courses</button>
+                            <button type="button" class="btn btn-secondary" id="downloadButton">Download</button>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-</section>
+    </section>
 
 
 
@@ -101,6 +100,17 @@ <h3>Directory Listing for <span id="path">/path/to/directory</span></h3>
         </div>
     </section>
 
+    <!-- Loading Screen -->
+    <div id="loading-screen"
+        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1000; align-items: center; justify-content: center; display: flex;">
+        <div style="text-align: center;">
+            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+                <span class="sr-only">Loading...</span>
+            </div>
+            <p style="color: black;">Loading, please wait...</p>
+        </div>
+    </div>
+
     <!-- Footer -->
     <footer class="py-6">
         <!-- Existing Footer Content -->