From cc185fb6cfea8ca3b217775b5c5baaff41645351 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Thu, 15 May 2025 21:58:47 +0800
Subject: [PATCH] refactor(front): simplify Skeleton loading state in [id].vue
 for improved readability

---
 front/pages/s/[id].vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/front/pages/s/[id].vue b/front/pages/s/[id].vue
index 013c294..bb3dae3 100644
--- a/front/pages/s/[id].vue
+++ b/front/pages/s/[id].vue
@@ -2,8 +2,6 @@
 import { LucideAlertCircle } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
-import { cx } from 'class-variance-authority'
-import { times } from 'lodash-es'
 import dayjs from 'dayjs'
 import FileShareView from '@/components/Share/FileShareView.vue'
 import TextShareView from '@/components/Share/TextShareView.vue'
@@ -33,7 +31,13 @@ const isExpired = computed(() => {
 <template>
     <div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 my-5">
         <div v-if="isLoading" class="flex flex-col gap-5 items-center">
-            <Skeleton :class="cx('w-40 h-5 rounded-full', i > 0 && '!w-20')" v-for="i in times(3)" :key="i" />
+            <Skeleton class="w-20 h-5 rounded-full" />
+            <Skeleton class="w-16 h-16 rounded-xl" />
+            <Skeleton class="w-20 h-5 rounded-full" />
+            <div class="flex flex-row w-full justify-around">
+                <Skeleton class="size-10 rounded-xl" v-for="i in 3" />
+            </div>
+            <Skeleton class="w-full h-5 rounded-full" />
         </div>
         <template v-else>
             <div v-if="isExpired" class="flex flex-col gap-5 items-center">