skeleton list component

ui/src/app/pages/apps-routes/app-metrics/app-metrics.module.ts

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { AppMetricsPage } from './app-metrics.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/skeleton-list.component.module'
 
 const routes: Routes = [
   {
@@ -20,6 +21,7 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     PwaBackComponentModule,
     SharingModule,
+    SkeletonListComponentModule,
   ],
   declarations: [AppMetricsPage],
 })

ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html

@@ -48,20 +48,7 @@
       </ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ng-container *ngIf="loading">
-        <div class="post">
-          <div class="label"></div>
-          <div class="note"></div>
-        </div>
-        <div class="post">
-          <div class="label"></div>
-          <div class="note"></div>
-        </div>
-        <div class="post">
-          <div class="label"></div>
-          <div class="note"></div>
-        </div>
-      </ng-container>
+      <skeleton-list *ngIf="loading" rows="3"></skeleton-list>
       <ion-item-group *ngIf="!loading">
         <ion-item *ngFor="let metric of metrics | keyvalue : asIsOrder">
           <ion-label>

ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.scss

@@ -1,44 +1,3 @@
 .metric-note {
   font-size: 16px;
-}
-
-$base-color: #7b7b7b;
-$shine-color: #8a8a8a;
-$animation-duration: 1.2s;
-
-@mixin background-gradient {
-  background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px);
-  background-size: 100px;
-}
-
-.post {
-  height: 52px;
-  position: relative;
-  left: 12px;
-  .label {
-    float: left;
-    left: 30px;
-    width: 55%;
-    height: 24px;
-    margin: 14px 0;
-    border-radius: 7px;
-    @include background-gradient;
-    animation: shine-lines $animation-duration infinite linear
-  }
-  .note {
-    float: right;
-    position: relative;
-    right: 12px;
-    width: 30%;
-    height: 24px;
-    margin: 14px 0;
-    border-radius: 7px;
-    @include background-gradient;
-    animation: shine-lines $animation-duration infinite linear
-  }
-}
-
-@keyframes shine-lines {
-  0% { background-position: -100px; }
-  40%, 100% { background-position: 140px; }
-}
+}

ui/src/app/pages/server-routes/server-metrics/server-metrics.module.ts

@@ -4,7 +4,7 @@ import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { ServerMetricsPage } from './server-metrics.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
-import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
+import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/skeleton-list.component.module'
 
 const routes: Routes = [
   {
@@ -19,7 +19,7 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     PwaBackComponentModule,
-    TextSpinnerComponentModule,
+    SkeletonListComponentModule,
   ],
   declarations: [ServerMetricsPage],
 })

ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html

@@ -8,9 +8,9 @@
 </ion-header>
 
 <ion-content>
-  <text-spinner *ngIf="loading; else loaded" text="Loading Metrics"></text-spinner>
+  <skeleton-list groups="3"></skeleton-list>
 
-  <ng-template #loaded>
+  <!-- <ng-template #loaded> -->
     <ion-item-group *ngFor="let metricGroup of metrics | keyvalue : asIsOrder">
       <ion-item-divider class="divider">{{ metricGroup.key }}</ion-item-divider>
       <ion-item *ngFor="let metric of metricGroup.value | keyvalue : asIsOrder">
@@ -22,6 +22,6 @@
         </ion-note>
       </ion-item>
     </ion-item-group>
-  </ng-template>
+  <!-- </ng-template> -->
 
 </ion-content>