clone/afilmory
1
0
Fork 0
mirror of https://github.com/Afilmory/afilmory synced 2026-02-01 22:48:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: enhance ActivitySkeleton and StatSkeleton components for improved styling and responsiveness

Browse Source 
- Updated the layout and styling of the ActivitySkeleton component to improve visual consistency and responsiveness.
- Added additional placeholder elements in ActivitySkeleton for better loading representation.
- Adjusted padding and dimensions in StatSkeleton for a more polished appearance.
- Ensured all skeleton elements have consistent animation effects for a smoother user experience.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
2025-12-05 17:14:02 +08:00
parent 62ec7be029
commit a71025a65c
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
be/apps/dashboard/src/modules/dashboard/components/DashboardOverview.tsx
View File

@@ -195,26 +195,32 @@ const EMPTY_STATS = {
function ActivitySkeleton() {
return (
<div className="bg-fill/10 border-fill-tertiary animate-pulse rounded-lg border px-3.5 py-3">
<div className="flex items-start gap-3">
<div className="bg-fill/20 h-11 w-11 shrink-0 rounded-lg" />
<div className="flex-1 space-y-2">
<div className="bg-fill/20 h-3.5 w-32 rounded-full" />
<div className="bg-fill/15 h-3 w-48 rounded-full" />
<div className="bg-fill/15 h-3 w-40 rounded-full" />
<div className="px-3.5 py-3">
<div className="flex items-start gap-2 sm:gap-3">
<div className="bg-fill/15 h-10 w-10 sm:h-11 sm:w-11 shrink-0 rounded-lg animate-pulse" />
<div className="flex-1 space-y-2 sm:space-y-2.5">
<div className="bg-fill/20 h-3.5 w-32 rounded-full animate-pulse" />
<div className="bg-fill/15 h-3 w-48 max-w-full rounded-full animate-pulse" />
<div className="bg-fill/15 h-3 w-40 max-w-full rounded-full animate-pulse" />
<div className="flex flex-wrap gap-1.5 pt-0.5">
<span className="bg-fill/20 h-4 w-14 rounded-full animate-pulse" />
<span className="bg-fill/20 h-4 w-12 rounded-full animate-pulse" />
<span className="bg-fill/20 h-4 w-16 rounded-full animate-pulse" />
</div>
</div>
</div>
<LinearDivider className="mt-5" />
</div>
)
}
function StatSkeleton() {
return (
<LinearBorderPanel className="bg-background-tertiary/60 relative overflow-hidden p-5">
<LinearBorderPanel className="bg-background-tertiary/60 relative overflow-hidden p-4 sm:p-5">
<div className="space-y-2.5">
<div className="bg-fill/20 h-3 w-20 rounded-full" />
<div className="bg-fill/30 h-7 w-24 rounded-md" />
<div className="bg-fill/20 h-3 w-32 rounded-full" />
<div className="bg-fill/20 h-3 w-24 rounded-full animate-pulse" />
<div className="bg-fill/30 h-7 sm:h-8 w-28 sm:w-32 rounded-md animate-pulse" />
<div className="bg-fill/20 h-3 w-36 sm:w-44 rounded-full animate-pulse" />
</div>
</LinearBorderPanel>
)