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

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