From c9b890f2dad17fb1c47587c0ee6cadb6752d7cda Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Tue, 12 Apr 2022 17:01:23 +0800
Subject: [PATCH] add skeleton

---
 src/views/Uptime.vue | 123 +++++++++++++++++++++++++------------------
 1 file changed, 71 insertions(+), 52 deletions(-)

diff --git a/src/views/Uptime.vue b/src/views/Uptime.vue
index 3c00e216..1b6544c6 100644
--- a/src/views/Uptime.vue
+++ b/src/views/Uptime.vue
@@ -34,67 +34,82 @@
           />
         </b-input-group>
       </b-card>
-      <b-row>
-        <b-col
-          v-for="(x,index) in uptime"
-          :key="index"
-          sm="12"
-          md="4"
-          class="text-truncate"
-        >
-          <div class="d-flex justify-content-between">
-            <b-form-checkbox
-              v-model="pinned"
-              :value="`${chain}#${x.address}`"
-              class="custom-control-warning text-truncate"
-              @change="pinValidator(`${chain}#${x.address}`)"
-            ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
-            </b-form-checkbox>
-            <span
-              v-if="missing[x.address]"
+      <b-skeleton-wrapper :loading="loading">
+        <template #loading>
+          <b-row>
+            <b-col
+              v-for="index in 100"
+              :key="index"
+              sm="12"
+              md="4"
             >
-              <b-badge
-                v-if="missing[x.address].missed_blocks_counter > 0"
-                v-b-tooltip.hover.v-danger
-                variant="light-danger"
-                :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
-                class="text-danger text-bolder"
+              <b-skeleton width="100%" />
+            </b-col>
+          </b-row>
+        </template>
+        <b-row>
+          <b-col
+            v-for="(x,index) in uptime"
+            :key="index"
+            sm="12"
+            md="4"
+            class="text-truncate"
+          >
+            <div class="d-flex justify-content-between">
+              <b-form-checkbox
+                v-model="pinned"
+                :value="`${chain}#${x.address}`"
+                class="custom-control-warning text-truncate"
+                @change="pinValidator(`${chain}#${x.address}`)"
+              ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
+              </b-form-checkbox>
+              <span
+                v-if="missing[x.address]"
               >
-                {{ missing[x.address].missed_blocks_counter }}
-              </b-badge>
-              <b-badge
-                v-else
-                v-b-tooltip.hover.v-success
-                variant="light-success"
-                title="Perfect! No missed blocks"
-              >
-                0
-              </b-badge>
-            </span>
-          </div>
-          <div class="d-flex justify-content-between align-self-stretch flex-wrap">
-            <div
-              v-for="(b,i) in blocks"
-              :key="i"
-              style="width:1.5%;"
-            ><router-link :to="`./blocks/${b.height}`">
-              <div
-                v-b-tooltip.hover.v-second
-                :title="b.height"
-                :class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
-                class="m-auto"
-              >&nbsp;</div>
-            </router-link>
+                <b-badge
+                  v-if="missing[x.address].missed_blocks_counter > 0"
+                  v-b-tooltip.hover.v-danger
+                  variant="light-danger"
+                  :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
+                  class="text-danger text-bolder"
+                >
+                  {{ missing[x.address].missed_blocks_counter }}
+                </b-badge>
+                <b-badge
+                  v-else
+                  v-b-tooltip.hover.v-success
+                  variant="light-success"
+                  title="Perfect! No missed blocks"
+                >
+                  0
+                </b-badge>
+              </span>
             </div>
-          </div>
-        </b-col>
-      </b-row>
+            <div class="d-flex justify-content-between align-self-stretch flex-wrap">
+              <div
+                v-for="(b,i) in blocks"
+                :key="i"
+                style="width:1.5%;"
+              ><router-link :to="`./blocks/${b.height}`">
+                <div
+                  v-b-tooltip.hover.v-second
+                  :title="b.height"
+                  :class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
+                  class="m-auto"
+                >&nbsp;</div>
+              </router-link>
+              </div>
+            </div>
+          </b-col>
+        </b-row>
+      </b-skeleton-wrapper>
     </b-card>
   </div>
 </template>
 
 <script>
 import {
+  BSkeleton, BSkeletonWrapper,
   BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BInputGroup, BInputGroupPrepend,
 } from 'bootstrap-vue'
 
@@ -114,6 +129,8 @@ export default {
     BBadge,
     BFormCheckbox,
     BInputGroup,
+    BSkeleton,
+    BSkeletonWrapper,
     BInputGroupPrepend,
   },
   directives: {
@@ -123,6 +140,7 @@ export default {
     const { chain } = this.$route.params
     const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : ''
     return {
+      loading: true,
       missedFilter: false,
       pinned,
       chain,
@@ -207,6 +225,7 @@ export default {
         this.blocks = blocks
 
         this.timer = setInterval(this.fetch_latest, 6000)
+        this.loading = false
       })
     },
     initColor() {