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

app/blog/[slug]/loading.js

@@ -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>
   );
 }

app/blogs/loading.js

@@ -2,10 +2,25 @@ import { Skeleton } from "@mui/material";
 
 export default function Loading() {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4" dir="rtl">
-      {Array.from({ length: 6 }).map((_, idx) => (
-        <Skeleton key={idx} variant="rounded" height={220} className="!rounded-lg" />
-      ))}
+    <div>
+      <Skeleton variant="rounded" width={150} height={24} className="my-[16px] md:my-[20px] lg:my-[24px]" />
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <li
+            key={idx}
+            className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]"
+          >
+            <Skeleton variant="rectangular" width="100%" height={217} />
+            <div className="p-[12px] md:p-[14px] lg:p-[16px]">
+              <Skeleton variant="rounded" width={150} height={18} className="mb-3" />
+              <div className="flex items-center justify-start gap-[16px]">
+                <Skeleton variant="rounded" width={100} height={18} />
+                <Skeleton variant="rounded" width={110} height={18} />
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

app/clinic/[slug]/loading.js

@@ -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>
   );
 }

app/clinics/loading.js

@@ -1,11 +1,18 @@
-import { Skeleton } from "@mui/material";
+"use client";
+
+import ItemClinic from "@/components/clinics/list/ItemClinic";
 
 export default function Loading() {
   return (
-    <div className="flex flex-col gap-4 p-4" dir="rtl">
-      {Array.from({ length: 6 }).map((_, idx) => (
-        <Skeleton key={idx} variant="rounded" height={140} className="!rounded-lg" />
-      ))}
+    <div className="padding-responsive pt-[20px]">
+      <ul
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px]
+            gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
+      >
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <ItemClinic key={idx} data={{}} loading setFilteredClinics={() => {}} />
+        ))}
+      </ul>
     </div>
   );
 }

app/doctor/[slug]/loading.js

@@ -1,17 +1,27 @@
-import { Skeleton } from "@mui/material";
+import CircularLoading from "@/app/component/loading/Circular";
+import CustomLoading from "@/app/component/loading/Custom";
+import TextLoading from "@/app/component/loading/Text";
 
 export default function Loading() {
   return (
-    <div className="p-4 flex flex-col gap-6" dir="rtl">
-      <div className="flex flex-col lg:flex-row items-center gap-4">
-        <Skeleton variant="circular" width={164} height={164} />
-        <div className="flex flex-col gap-3 w-full">
-          <Skeleton variant="rounded" width={200} height={24} />
-          <Skeleton variant="rounded" width={160} height={20} />
-          <Skeleton variant="rounded" width={120} height={20} />
+    <div className="padding-responsive pt-[95px] sm:pt-[120px]">
+      <div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
+        <CircularLoading
+          loading
+          width={100}
+          height={100}
+          className="w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px] h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]"
+        />
+        <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
+          <TextLoading loading width={90} height={20} />
+          <TextLoading loading width={100} height={20} />
+          <div className="flex items-center justify-start gap-11">
+            <TextLoading loading width={60} height={20} />
+            <TextLoading loading width={120} height={20} />
+          </div>
+          <CustomLoading loading width={160} height={25} />
         </div>
       </div>
-      <Skeleton variant="rounded" height={300} className="!rounded-lg" />
     </div>
   );
 }

app/doctors/loading.js

@@ -1,11 +1,17 @@
-import { Skeleton } from "@mui/material";
+"use client";
+
+import ItemDoctor from "@/app/component/ItemDoctor";
 
 export default function Loading() {
   return (
-    <div className="flex flex-col gap-4 p-4" dir="rtl">
-      {Array.from({ length: 6 }).map((_, idx) => (
-        <Skeleton key={idx} variant="rounded" height={140} className="!rounded-lg" />
-      ))}
+    <div className="pt-[95px] sm:pt-[120px] padding-responsive">
+      <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
+        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
+          {Array.from({ length: 6 }).map((_, idx) => (
+            <ItemDoctor key={idx} doctor={{ id: idx }} loading setDoctors={() => {}} />
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }