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

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
+10 -6
View File
@@ -2,13 +2,17 @@ import { Skeleton } from "@mui/material";
export default function Loading() {
return (
<div className="p-4 flex flex-col gap-6" dir="rtl">
<Skeleton variant="rounded" height={180} className="!rounded-lg" />
<div className="flex flex-col gap-3">
<Skeleton variant="rounded" width={200} height={24} />
<Skeleton variant="rounded" width={160} height={20} />
<div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
<div className="flex gap-6">
<Skeleton variant="rounded" width={100} height={32} />
<Skeleton variant="rounded" width={100} height={32} />
<Skeleton variant="rounded" width={100} height={32} />
</div>
<div className="mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px] flex flex-col gap-4">
<Skeleton variant="rounded" height={200} className="!rounded-lg" />
<Skeleton variant="rounded" height={20} className="!w-full" />
<Skeleton variant="rounded" height={20} width={300} />
</div>
<Skeleton variant="rounded" height={300} className="!rounded-lg" />
</div>
);
}