skeleton list component

ui/src/app/components/skeleton-list/skeleton-list.component.html

@@ -0,0 +1,16 @@
+<ng-container *ngIf="groups">
+  <ng-container *ngFor="let g of groupsArr">
+    <ion-item-divider></ion-item-divider>
+    <div *ngFor="let r of rowsArr" class="post">
+      <div class="label"></div>
+      <div class="note"></div>
+    </div>
+  </ng-container>
+</ng-container>
+
+<ng-container *ngIf="!groups">
+  <div *ngFor="let r of rowsArr" class="post">
+    <div class="label"></div>
+    <div class="note"></div>
+  </div>
+</ng-container>

ui/src/app/components/skeleton-list/skeleton-list.component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { SkeletonListComponent } from './skeleton-list.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+
+@NgModule({
+  declarations: [
+    SkeletonListComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+  ],
+  exports: [SkeletonListComponent],
+})
+export class SkeletonListComponentModule { }

ui/src/app/components/skeleton-list/skeleton-list.component.scss

@@ -0,0 +1,44 @@
+$base-color: #3e3e3e;
+$shine-color: #454545;
+$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;
+  background-color: var(--ion-item-background);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: #262626;
+  .label {
+    float: left;
+    left: 30px;
+    width: 50%;
+    height: 24px;
+    margin: 14px 0;
+    border-radius: 7px;
+    @include background-gradient;
+    animation: shine-lines $animation-duration infinite linear
+  }
+  .note {
+    float: right;
+    position: relative;
+    right: 24px;
+    width: 25%;
+    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/components/skeleton-list/skeleton-list.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'skeleton-list',
+  templateUrl: './skeleton-list.component.html',
+  styleUrls: ['./skeleton-list.component.scss'],
+})
+export class SkeletonListComponent {
+  @Input() groups: number
+  @Input() rows: number = 3
+  groupsArr: number[] = []
+  rowsArr: number[] = []
+
+  ngOnInit () {
+    if (this.groups) {
+      this.groupsArr = Array(Number(this.groups)).fill(0).map((_, i) => i)
+    }
+    this.rowsArr = Array(Number(this.rows)).fill(0).map((_, i) => i)
+  }
+}

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>