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

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