From 3430188991e6afd0e83d735ba66c8a389c55616d Mon Sep 17 00:00:00 2001
From: Omar-Nabil <omarabosalem66@gmail.com>
Date: Sun, 18 Aug 2024 04:56:00 +0300
Subject: [PATCH] add new style to our progress in toolbar

---
 src/app/core/shell/shell.component.html       |  6 +-
 src/app/core/shell/shell.component.scss       | 79 +++++++++++++++++++
 src/app/core/shell/shell.component.ts         |  2 +-
 .../core/shell/toolbar/toolbar.component.html |  2 +-
 4 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html
index c78a2f2ee..efa8968aa 100644
--- a/src/app/core/shell/shell.component.html
+++ b/src/app/core/shell/shell.component.html
@@ -18,12 +18,14 @@
   </mat-sidenav>
 
   <!-- Content -->
-  <mat-sidenav-content>
+  <mat-sidenav-content class="sidenav">
 
     <!-- Toolbar -->
     <mifosx-toolbar [sidenav]="sidenav" (collapse)="toggleCollapse($event)"></mifosx-toolbar>
     <!-- Progress Bar -->
-    <mat-progress-bar [mode]="progressBarMode"></mat-progress-bar>
+    <div *ngIf="progressBarMode !== 'none'">
+      <div class="loading"></div>
+    </div>
 
     <!-- Breadcrumb -->
     <mifosx-breadcrumb></mifosx-breadcrumb>
diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss
index f2dccdd01..9c78a429d 100644
--- a/src/app/core/shell/shell.component.scss
+++ b/src/app/core/shell/shell.component.scss
@@ -16,3 +16,82 @@
     width: 4rem;
   }
 }
+
+
+$bar: 190px;
+$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: 64px;
+}
+
+.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/core/shell/shell.component.ts b/src/app/core/shell/shell.component.ts
index d35a27608..5787f55ea 100644
--- a/src/app/core/shell/shell.component.ts
+++ b/src/app/core/shell/shell.component.ts
@@ -1,6 +1,6 @@
 /** Angular Imports */
-import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 
 /** rxjs Imports */
 import { Observable, Subscription } from 'rxjs';
diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index 2f0f0c5c2..4b939a133 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -65,7 +65,7 @@
   <div #themeToggle>
     <mifosx-theme-toggle></mifosx-theme-toggle>
   </div>
-  
+
   <div #appMenu>
     <button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
       <img src="assets/images/user_placeholder.png">