Merge pull request #52 from TheManWhoLikesToCode/47-p0-loading-screen…

…-not-loading Added Loading Screen
TheManWhoLikesToCode · Jan 22, 2024 · b03720e · b03720e
2 parents 87bbc43 + c6628ec
commit b03720e
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 25 deletions.
diff --git a/frontend/static/default.css b/frontend/static/default.css
@@ -10384,4 +10384,4 @@ footer h5 {
   .switcher-wrap {
     display: none;
   }
-}
+}
diff --git 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";
     }
   };
 
@@ -124,12 +124,11 @@ const app = (() => {
 
   const loginEventHandler = async (e) => {
     e.preventDefault();
+    showLoadingScreen();
     const username = document.getElementById("username").value;
     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/login.html b/frontend/templates/login.html
@@ -61,6 +61,16 @@ <h3 class="card-title text-center">Login to Archive Me</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>
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

diff --git 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 -->
-Original file line number
+Diff line change
@@ Expand Up / @@ -10384,4 +10384,4 @@ footer h5 { @@
       .switcher-wrap {
         display: none;
       }
-    }
+    }