clone/afilmory
1
0
Fork 0
mirror of https://github.com/Afilmory/afilmory synced 2026-04-24 23:05:05 +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() { function ActivitySkeleton() {
return ( return (
<div className="bg-fill/10 border-fill-tertiary animate-pulse rounded-lg border px-3.5 py-3"> <div className="px-3.5 py-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-2 sm:gap-3">
<div className="bg-fill/20 h-11 w-11 shrink-0 rounded-lg" /> <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"> <div className="flex-1 space-y-2 sm:space-y-2.5">
<div className="bg-fill/20 h-3.5 w-32 rounded-full" /> <div className="bg-fill/20 h-3.5 w-32 rounded-full animate-pulse" />
<div className="bg-fill/15 h-3 w-48 rounded-full" /> <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 rounded-full" /> <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>
</div> </div>
<LinearDivider className="mt-5" />
</div> </div>
) )
} }
function StatSkeleton() { function StatSkeleton() {
return ( 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="space-y-2.5">
<div className="bg-fill/20 h-3 w-20 rounded-full" /> <div className="bg-fill/20 h-3 w-24 rounded-full animate-pulse" />
<div className="bg-fill/30 h-7 w-24 rounded-md" /> <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-32 rounded-full" /> <div className="bg-fill/20 h-3 w-36 sm:w-44 rounded-full animate-pulse" />
</div> </div>
</LinearBorderPanel> </LinearBorderPanel>
) )