From 521fc015df93fff32a6c705b4864c8524834dbca Mon Sep 17 00:00:00 2001
From: Omar-Nabil <omarabosalem66@gmail.com>
Date: Sun, 18 Aug 2024 07:19:38 +0300
Subject: [PATCH] add new progress bar to our app

---
 src/app/clients/clients.component.html        |  4 +-
 src/app/clients/clients.component.scss        | 78 +++++++++++++++++
 .../investors/investors.component.html        |  5 +-
 .../investors/investors.component.scss        | 80 +++++++++++++++++
 .../table-and-sms.component.html              |  4 +-
 .../table-and-sms.component.scss              | 86 ++++++++++++++++++-
 .../general-tab/general-tab.component.html    |  4 +-
 .../general-tab/general-tab.component.scss    | 81 +++++++++++++++++
 8 files changed, 332 insertions(+), 10 deletions(-)

diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index d21d917a3..b073fb43b 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -20,7 +20,9 @@
   </div>
 
   <div [hidden]="!existsClientsToFilter">
-    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+    <div *ngIf="isLoading">
+      <div class="loading"></div>
+    </div>
     <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
 
       <!-- Name Column -->
diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss
index fddd262cb..0f1cc336f 100644
--- a/src/app/clients/clients.component.scss
+++ b/src/app/clients/clients.component.scss
@@ -22,3 +22,81 @@ table {
     color : black;
   }
 }
+
+$bar: 150px;
+$foo: $bar * 8;
+$color: #e2e4ec;
+
+
+.loading {
+  position: absolute;
+  width: $bar;
+  height: 8px;
+  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  animation: grow 4s linear infinite, move 4s linear infinite;
+  top: 75px;
+}
+
+.sidenav {
+  overflow-x: hidden;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+  }
+
+  16.7% {
+    left: 0;
+  }
+
+  33.3% {
+    left: $foo / 2;
+  }
+
+  50% {
+    left: $foo - $bar;
+  }
+
+  66.7% {
+    left: $foo / 2;
+  }
+
+  83.3% {
+    left: 0;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes grow {
+  0% {
+    width: $bar;
+  }
+
+  16.7% {
+    width: $foo / 2;
+  }
+
+  33.3% {
+    width: $foo / 2;
+  }
+
+  50% {
+    width: $bar;
+  }
+
+  66.7% {
+    width: $foo / 2;
+  }
+
+  83.3% {
+    width: $foo / 2;
+  }
+
+  100% {
+    width: $bar;
+  }
+}
diff --git a/src/app/organization/investors/investors.component.html b/src/app/organization/investors/investors.component.html
index be89e0244..e2abfabc0 100644
--- a/src/app/organization/investors/investors.component.html
+++ b/src/app/organization/investors/investors.component.html
@@ -47,8 +47,9 @@
   </div>
 
   <div class="mat-elevation-z8 container m-t-20">
-    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
-
+    <div *ngIf="isLoading" class="loader">
+      <div class="loading"></div>
+    </div>
     <mat-accordion *ngIf="existsDataToFilter">
       <mat-expansion-panel *ngFor="let record of searchResults;index as i" class="record">
         <mat-expansion-panel-header>
diff --git a/src/app/organization/investors/investors.component.scss b/src/app/organization/investors/investors.component.scss
index f54846b90..bc74de941 100644
--- a/src/app/organization/investors/investors.component.scss
+++ b/src/app/organization/investors/investors.component.scss
@@ -35,3 +35,83 @@
   }
 }
 
+$bar: 140px;
+$foo: $bar * 8;
+$color: #e2e4ec;
+
+.loader {
+  margin-bottom: 39px;
+}
+
+.loading {
+  position: absolute;
+  width: $bar;
+  height: 8px;
+  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  animation: grow 4s linear infinite, move 4s linear infinite;
+  top: 154px;
+}
+
+.sidenav {
+  overflow-x: hidden;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+  }
+
+  16.7% {
+    left: 0;
+  }
+
+  33.3% {
+    left: $foo / 2;
+  }
+
+  50% {
+    left: $foo - $bar;
+  }
+
+  66.7% {
+    left: $foo / 2;
+  }
+
+  83.3% {
+    left: 0;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes grow {
+  0% {
+    width: $bar;
+  }
+
+  16.7% {
+    width: $foo / 2;
+  }
+
+  33.3% {
+    width: $foo / 2;
+  }
+
+  50% {
+    width: $bar;
+  }
+
+  66.7% {
+    width: $foo / 2;
+  }
+
+  83.3% {
+    width: $foo / 2;
+  }
+
+  100% {
+    width: $bar;
+  }
+}
diff --git a/src/app/reports/run-report/table-and-sms/table-and-sms.component.html b/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
index 4ebd02868..bf5a4f240 100644
--- a/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
+++ b/src/app/reports/run-report/table-and-sms/table-and-sms.component.html
@@ -45,8 +45,8 @@
     </div>
   </div>
 
-  <div class="table-output" *ngIf="hideOutput">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <div *ngIf="hideOutput" class="loader">
+    <div class="loading"></div>
   </div>
 
   <div class="back-button" *ngIf="!hideOutput">
diff --git a/src/app/reports/run-report/table-and-sms/table-and-sms.component.scss b/src/app/reports/run-report/table-and-sms/table-and-sms.component.scss
index f9d6a5b90..c649ed7ab 100644
--- a/src/app/reports/run-report/table-and-sms/table-and-sms.component.scss
+++ b/src/app/reports/run-report/table-and-sms/table-and-sms.component.scss
@@ -1,7 +1,3 @@
-.table-output {
-    overflow: auto;
-}
-
 .select-row:hover {
     cursor: pointer;
   }
@@ -18,3 +14,85 @@
   max-height: 2%;
   margin-bottom: 2%;
 }
+
+$bar: 140px;
+$foo: $bar * 8;
+$color: #e2e4ec;
+
+.loader {
+  margin-bottom: 39px;
+  overflow: auto;
+}
+
+.loading {
+  position: absolute;
+  width: $bar;
+  height: 8px;
+  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  animation: grow 4s linear infinite, move 4s linear infinite;
+  top: 82px;
+}
+
+.sidenav {
+  overflow-x: hidden;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+  }
+
+  16.7% {
+    left: 0;
+  }
+
+  33.3% {
+    left: $foo / 2;
+  }
+
+  50% {
+    left: $foo - $bar;
+  }
+
+  66.7% {
+    left: $foo / 2;
+  }
+
+  83.3% {
+    left: 0;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes grow {
+  0% {
+    width: $bar;
+  }
+
+  16.7% {
+    width: $foo / 2;
+  }
+
+  33.3% {
+    width: $foo / 2;
+  }
+
+  50% {
+    width: $bar;
+  }
+
+  66.7% {
+    width: $foo / 2;
+  }
+
+  83.3% {
+    width: $foo / 2;
+  }
+
+  100% {
+    width: $bar;
+  }
+}
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.html b/src/app/savings/savings-account-view/general-tab/general-tab.component.html
index 41bdd184d..bf2f0e6fd 100644
--- a/src/app/savings/savings-account-view/general-tab/general-tab.component.html
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.html
@@ -1,5 +1,7 @@
 
-<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+<div *ngIf="isLoading" class="loader">
+  <div class="loading"></div>
+</div>
 
 <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%" *ngIf="!isLoading">
 
diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss b/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
index e69de29bb..59bd10f9d 100644
--- a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
+++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.scss
@@ -0,0 +1,81 @@
+$bar: 160px;
+$foo: $bar * 8;
+$color: #e2e4ec;
+
+.loader {
+  margin-bottom: 39px;
+  overflow: auto;
+}
+
+.loading {
+  position: absolute;
+  width: $bar;
+  height: 8px;
+  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
+  animation: grow 4s linear infinite, move 4s linear infinite;
+  top: 169px;
+}
+
+.sidenav {
+  overflow-x: hidden;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+  }
+
+  16.7% {
+    left: 0;
+  }
+
+  33.3% {
+    left: $foo / 2;
+  }
+
+  50% {
+    left: $foo - $bar;
+  }
+
+  66.7% {
+    left: $foo / 2;
+  }
+
+  83.3% {
+    left: 0;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes grow {
+  0% {
+    width: $bar;
+  }
+
+  16.7% {
+    width: $foo / 2;
+  }
+
+  33.3% {
+    width: $foo / 2;
+  }
+
+  50% {
+    width: $bar;
+  }
+
+  66.7% {
+    width: $foo / 2;
+  }
+
+  83.3% {
+    width: $foo / 2;
+  }
+
+  100% {
+    width: $bar;
+  }
+}