added animation spinner and routes sidebar

src/app/components/shared/clock/clock.component.html

@@ -1,9 +1,8 @@
 <div class="row">
     <div class="col mt-1  time-clock-color">
-        <!-- fa fa-spin -->
-        <i class="fas fa-sync-alt "></i>
+        <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
     </div>
-    <div class="col time-clock-color">
-        <h3>{{ hour | number }}:{{ minutes | number }}:{{ seconds | number }}</h3>
+    <div *ngIf="displayTime" class="col time-clock-color">
+        <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
     </div>
 </div>

src/app/components/shared/clock/clock.component.ts

@@ -11,14 +11,28 @@ export class ClockComponent implements OnInit {
   hour: number;
   minutes: number;
   seconds: number;
+  displayTime: boolean;
 
   constructor() {
     this.currentDate = new Date();
     this.hour = this.currentDate.getHours();
     this.minutes = this.currentDate.getMinutes();
     this.seconds = this.currentDate.getSeconds();
+    this.displayTime = false;
+    setTimeout(() => {
+      this.displayTime = true;
+    }, 3000);
    }
 
+    horatTest() {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+      this.displayTime = false;
+      setTimeout( 'horatTest()' , 3000);
+    }
+
 
   ngOnInit(): void {
   }

src/app/components/shared/sidebar/sidebar.component.html

@@ -1,5 +1,4 @@
 <div class="d-flex" id="wrapper">
-
     <!-- Sidebar -->
     <div class="bg-light border-right" id="sidebar-wrapper">
         <div class="list-group list-group-flush">