From 23a78e59c908718c6aad8994b021f11e64327eb3 Mon Sep 17 00:00:00 2001
From: henry <csthenry@foxmail.com>
Date: Sun, 27 Aug 2023 22:21:34 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=B7=BB=E5=8A=A0skeleton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hoj-vue/src/views/oj/Home.vue | 118 +++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 58 deletions(-)

diff --git a/hoj-vue/src/views/oj/Home.vue b/hoj-vue/src/views/oj/Home.vue
index be5e1f0c3..3b9283627 100644
--- a/hoj-vue/src/views/oj/Home.vue
+++ b/hoj-vue/src/views/oj/Home.vue
@@ -249,66 +249,68 @@
               <i class="el-icon-s-data"></i> {{ $t('m.Recent_7_Days_AC_Rank')}}
             </span>
           </div>
-          <vxe-table
-            border="inner"
-            stripe
-            auto-resize
-            align="center"
-            :data="recentUserACRecord"
-            max-height="500px"
-            :loading="loading.recent7ACRankLoading"
-          >
-            <vxe-table-column
-              type="seq"
-              min-width="50"
-            >
-              <template v-slot="{ rowIndex }">
-                <span :class="getRankTagClass(rowIndex)">{{ rowIndex + 1 }}
-                </span>
-                <span :class="'cite no' + rowIndex"></span>
-              </template>
-            </vxe-table-column>
-            <vxe-table-column
-              field="username"
-              :title="$t('m.Username')"
-              min-width="200"
-              align="left"
+          <el-skeleton :rows="5" :loading="loading.recent7ACRankLoading" animated>
+            <vxe-table
+              border="inner"
+              stripe
+              auto-resize
+              align="center"
+              :data="recentUserACRecord"
+              max-height="500px"
+              :loading="loading.recent7ACRankLoading"
             >
-              <template v-slot="{ row }">
-                <avatar
-                  :username="row.username"
-                  :inline="true"
-                  :size="25"
-                  color="#FFF"
-                  :src="row.avatar"
-                  class="user-avatar"
-                ></avatar>
-                <a
-                  @click="goUserHome(row.username, row.uid)"
-                  style="color:#2d8cf0;"
-                >{{ row.username }}</a>
-                <span
-                  style="margin-left:2px"
-                  v-if="row.titleName"
-                >
-                  <el-tag
-                    effect="dark"
-                    size="small"
-                    :color="row.titleColor"
+              <vxe-table-column
+                type="seq"
+                min-width="50"
+              >
+                <template v-slot="{ rowIndex }">
+                  <span :class="getRankTagClass(rowIndex)">{{ rowIndex + 1 }}
+                  </span>
+                  <span :class="'cite no' + rowIndex"></span>
+                </template>
+              </vxe-table-column>
+              <vxe-table-column
+                field="username"
+                :title="$t('m.Username')"
+                min-width="200"
+                align="left"
+              >
+                <template v-slot="{ row }">
+                  <avatar
+                    :username="row.username"
+                    :inline="true"
+                    :size="25"
+                    color="#FFF"
+                    :src="row.avatar"
+                    class="user-avatar"
+                  ></avatar>
+                  <a
+                    @click="goUserHome(row.username, row.uid)"
+                    style="color:#2d8cf0;"
+                  >{{ row.username }}</a>
+                  <span
+                    style="margin-left:2px"
+                    v-if="row.titleName"
                   >
-                    {{ row.titleName }}
-                  </el-tag>
-                </span>
-              </template>
-            </vxe-table-column>
-            <vxe-table-column
-              field="ac"
-              :title="$t('m.AC')"
-              min-width="50"
-              align="left"
-            >
-            </vxe-table-column>
-          </vxe-table>
+                    <el-tag
+                      effect="dark"
+                      size="small"
+                      :color="row.titleColor"
+                    >
+                      {{ row.titleName }}
+                    </el-tag>
+                  </span>
+                </template>
+              </vxe-table-column>
+              <vxe-table-column
+                field="ac"
+                :title="$t('m.AC')"
+                min-width="50"
+                align="left"
+              >
+              </vxe-table-column>
+            </vxe-table>
+          </el-skeleton>
         </el-card>
         <el-card class="card-top">
           <div