add loading indicators on register

CVHS-student-sites · May 22, 2024 · e9b0020 · e9b0020
1 parent 2936cca
commit e9b0020
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/src/routes/(app)/register/views/Final.svelte b/src/routes/(app)/register/views/Final.svelte
@@ -7,13 +7,17 @@
 
     import {singleLocker, registrationData, studentId1, studentId2, selectedLocation, pageView, editMode} from "../store.js";
     import {goto} from "$app/navigation";
+    import {SyncLoader} from "svelte-loading-spinners";
 
 
     let studentsArr = [];
 
     let buttonMessage = 'Submit';
 
+    let loading = false;
+
     async function next() {
+        loading = true;
         studentsArr[0] = $studentId1;
         if (!$singleLocker) studentsArr[1] = $studentId2;
 
@@ -34,6 +38,7 @@
             studentId2.set(null);
             pageView.set(0);
         } else {
+            loading = false;
             //todo show error reason
         }
     }
@@ -82,6 +87,7 @@
         padding: 32px;
         color: green;
         background-color: #1b2c42;
+        position: absolute;
     }
 
     .box-header {
@@ -184,6 +190,15 @@
         gap: 10px;
     }
 
+    .loading-bar{
+        position: absolute;
+        top: -50px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     @media only screen and (max-width: 600px) {
         .box {
             row-gap: 30px;
@@ -206,6 +221,12 @@
 <div class="main" in:slide={{ delay: 250, duration: 600, easing: quartOut, axis: 'x' }}>
     <div class="box">
         <div class="box-cont">
+
+            {#if loading}
+                <div class="loading-bar"><SyncLoader size="40" color="#577db2" unit="px" duration="0.8s" /></div>
+            {/if}
+
+
             <div class="box-header">Confirm Locker Selection</div>
 
             <div class="selection-div">

diff --git a/src/routes/(app)/register/views/View1.svelte b/src/routes/(app)/register/views/View1.svelte
@@ -1,5 +1,7 @@
 <script>
     import {createEventDispatcher} from "svelte";
+    import {SyncLoader} from "svelte-loading-spinners";
+
     import {slide} from "svelte/transition";
     import {quartOut} from "svelte/easing";
     import {
@@ -22,6 +24,8 @@
     let input1;
     let input2;
 
+    let loading = false;
+
     function handleKeyPress(event) {
         if (event.key === "Enter") {
             login();
@@ -51,11 +55,13 @@
     async function login(event) {
         event.preventDefault();
 
+        loading = true;
         if ($singleLocker) {
             try {
                 let response = await validateID(student1);
                 const jsonResponse = await response.json();
                 if (response.status === 400) {
+                    loading = false;
                     input1.style.borderColor = "red";
                     input1.value = "";
                     input1.placeholder = jsonResponse.error;
@@ -64,6 +70,7 @@
                     if (gradeCanRegister) {
                         studentId1.set(student1);
                         await sendVerification($studentId1);
+                        loading = false;
                         pageView.set(3);
                     } else {
                         input1.style.borderColor = "red";
@@ -88,6 +95,7 @@
                 const jsonResponse = await response.json();
                 if (response.status === 400) {
                     status = false;
+                    loading = false;
                     input1.style.borderColor = "red";
                     input1.value = "";
                     input1.placeholder = jsonResponse.error; //todo this should get a message from the server
@@ -108,6 +116,7 @@
                 const jsonResponse = await response.json();
                 if (response.status === 400) {
                     status = false;
+                    loading = false;
                     input2.style.borderColor = "red";
                     input2.value = "";
                     input2.placeholder = jsonResponse.error; //todo this should get a message from the server
@@ -127,8 +136,10 @@
                 if (gradeCanRegister) {
                     await sendVerification($studentId1);
                     await sendVerification($studentId2);
+                    loading = false;
                     pageView.set(3);
                 } else {
+                    loading = false;
                     input1.style.borderColor = "red";
                     input1.value = "";
                     input1.placeholder = "Grade cannot register";
@@ -217,6 +228,7 @@
         padding: 32px;
         color: green;
         background-color: #1b2c42;
+        position: absolute;
     }
 
     .login-header {
@@ -317,6 +329,14 @@
         gap: 10px;
     }
 
+    .loading-bar{
+        position: absolute;
+        top: -50px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 
     @media only screen and (max-width: 600px) {
         .main {
@@ -355,6 +375,11 @@
 >
     <div class="login">
         <div class="login-cont">
+
+            {#if loading}
+                <div class="loading-bar"><SyncLoader size="40" color="#577db2" unit="px" duration="0.8s" /></div>
+            {/if}
+
             <div class="login-header">Verify IDs</div>
 
             <form