add skeleton

src/views/Uptime.vue

@@ -34,6 +34,19 @@
           />
         </b-input-group>
       </b-card>
+      <b-skeleton-wrapper :loading="loading">
+        <template #loading>
+          <b-row>
+            <b-col
+              v-for="index in 100"
+              :key="index"
+              sm="12"
+              md="4"
+            >
+              <b-skeleton width="100%" />
+            </b-col>
+          </b-row>
+        </template>
         <b-row>
           <b-col
             v-for="(x,index) in uptime"
@@ -89,12 +102,14 @@
             </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() {