GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(front): simplify Skeleton loading state in [id].vue for improved readability

Browse Source
This commit is contained in:
keven1024
2025-05-15 21:58:47 +08:00
parent e2b61825f7
commit cc185fb6cf
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/pages/s/[id].vue
View File

@@ -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">