From 16f5764f742f66ce24e5846ff58cad156523b0df Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Wed, 14 Jul 2021 09:48:54 -0600
Subject: [PATCH] use ionic skeleton text

---
 .../skeleton-list.component.html              | 34 +++++++++-----
 .../skeleton-list.component.scss              | 47 ++-----------------
 .../server-metrics/server-metrics.page.html   |  6 +--
 3 files changed, 29 insertions(+), 58 deletions(-)

diff --git a/ui/src/app/components/skeleton-list/skeleton-list.component.html b/ui/src/app/components/skeleton-list/skeleton-list.component.html
index 5a43ad94f..6975050cf 100644
--- a/ui/src/app/components/skeleton-list/skeleton-list.component.html
+++ b/ui/src/app/components/skeleton-list/skeleton-list.component.html
@@ -1,16 +1,28 @@
 <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>
+  <ion-item-group>
+    <ng-container *ngFor="let g of groupsArr">
+      <ion-item-divider>
+        <ion-skeleton-text style="width: 15%"></ion-skeleton-text>
+      </ion-item-divider>
+      <ion-item *ngFor="let r of rowsArr">
+        <ion-label>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </ion-label>
+        <ion-note slot="end">
+          <ion-skeleton-text animated style="width: 100%"></ion-skeleton-text>
+        </ion-note>
+      </ion-item>
+    </ng-container>
+  </ion-item-group>
 </ng-container>
 
 <ng-container *ngIf="!groups">
-  <div *ngFor="let r of rowsArr" class="post">
-    <div class="label"></div>
-    <div class="note"></div>
-  </div>
+  <ion-item *ngFor="let r of rowsArr">
+    <ion-label>
+      <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+    </ion-label>
+    <ion-note slot="end">
+      <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+    </ion-note>
+  </ion-item>
 </ng-container>
\ No newline at end of file
diff --git a/ui/src/app/components/skeleton-list/skeleton-list.component.scss b/ui/src/app/components/skeleton-list/skeleton-list.component.scss
index 8ae532d55..79ca6ab3f 100644
--- a/ui/src/app/components/skeleton-list/skeleton-list.component.scss
+++ b/ui/src/app/components/skeleton-list/skeleton-list.component.scss
@@ -1,44 +1,3 @@
-$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; }
-}
+ion-note {
+  width: 50%;
+}
\ No newline at end of file
diff --git a/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html b/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
index 72413763e..895b2bb6c 100644
--- a/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
+++ b/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
@@ -8,9 +8,9 @@
 </ion-header>
 
 <ion-content>
-  <skeleton-list groups="3"></skeleton-list>
+  <skeleton-list *ngIf="loading; else loaded" 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>
\ No newline at end of file