feat(loading): enhance loading components with responsive design and improved skeletons
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user