hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(loading): enhance loading components with responsive design and improved skeletons

Browse Source
This commit is contained in:
hamed
2026-06-21 11:49:30 +03:30
parent 06a877a725
commit 704a514542
6 changed files with 87 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[slug]/loading.js
+16 -6
View File
@@ -2,12 +2,22 @@ import { Skeleton } from "@mui/material";
export default function Loading() {
return (
<div className="p-4 flex flex-col gap-4" dir="rtl">
<Skeleton variant="rounded" height={280} className="!rounded-lg" />
<Skeleton variant="rounded" width={220} height={28} />
<Skeleton variant="rounded" height={20} className="!w-full" />
<Skeleton variant="rounded" height={20} className="!w-full" />
<Skeleton variant="rounded" height={20} width={300} />
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
<Skeleton variant="rounded" width={300} height={16} />
<Skeleton variant="rounded" width={400} height={28} className="mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" />
<div className="flex items-center gap-[35px] mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px]">
<Skeleton variant="rounded" width={120} height={16} />
<Skeleton variant="rounded" width={140} height={16} />
</div>
<div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
<div className="w-full flex flex-col gap-3">
<Skeleton variant="rounded" height={280} className="!rounded-lg" />
<Skeleton variant="rounded" height={20} className="!w-full" />
<Skeleton variant="rounded" height={20} className="!w-full" />
<Skeleton variant="rounded" height={20} width={300} />
</div>
<Skeleton variant="rounded" width={320} height={300} className="!rounded-lg shrink-0" />
</div>
</div>
);
}