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