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

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