refactor: simplify Loading component layout and enhance skeleton structure for improved loading states

Llewellyn500 · Llewellyn500 · commit 56829dcc6b10 · 2025-03-04T13:10:17.000Z
diff --git a/components/Authors/loading.tsx b/components/Authors/loading.tsx
@@ -1,61 +1,27 @@
 import { Skeleton } from "../ui/skeleton";
-import SkeletonCard from "./SkeletonCard";
 
 export default function Loading() {
   return (
-    <div>
-      <div className="flex flex-col-reverse sm:flex-col gap-12 py-10 max-w-[95rem] w-full mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
-          <Skeleton className="bg-[#a1a1a1] rounded-none box h-[10.625rem]"></Skeleton>
-          <div className="flex flex-col gap-0.5 justify-between">
-            <Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
-            <Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
-            <Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
-            <Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
-            <Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
-            <div className="flex justify-between sm:items-center gap-2 mt-2">
-              <div className="flex flex-col lg:flex-row gap-2">
-                <div className="flex gap-2">
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-10 rounded-none" />
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-24 rounded-none" />
-                </div>
-                <div className="flex gap-2">
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-10 rounded-none" />
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-24 rounded-none" />
-                </div>
-                <div className="flex gap-2">
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-10 rounded-none" />
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-24 rounded-none" />
-                </div>
+    <div className="max-w-[95rem] w-full mx-auto py-8 lg:pt-24 lg:pb-48">
+      {/* Grid layout to match the provided image */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {[...Array(6)].map((_, index) => (
+          <div key={index} className="bg-[#a1a1a1] p-6 flex items-center gap-6">
+            {/* Circular Profile Image Skeleton */}
+            <Skeleton className="w-24 h-34 rounded-full bg-[#a1a1a1]" />
+            <div className="flex flex-col flex-1">
+              <Skeleton className="h-6 w-40 bg-[#a1a1a1] mb-2" />
+              <div className="flex gap-4">
+                <Skeleton className="h-4 w-16 bg-[#a1a1a1]" />
+                <Skeleton className="h-4 w-24 bg-[#a1a1a1]" />
               </div>
-              <div className="flex justify-end">
-                <Skeleton className="bg-white h-[2.625rem] w-[3.5rem] border border-[#a1a1a1] rounded-full flex items-center justify-center">
-                  <Skeleton className="bg-[#a1a1a1] h-6 w-8 rounded-none" />
-                </Skeleton>
+              <div className="flex gap-4 mt-2">
+                <Skeleton className="h-4 w-16 bg-[#a1a1a1]" />
+                <Skeleton className="h-4 w-24 bg-[#a1a1a1]" />
               </div>
             </div>
           </div>
-        </div>
-        <Skeleton className="bg-[#a1a1a1] min-h-[10vh] sm:min-h-[30vh] lg:min-h-[50vh] w-full rounded-none"></Skeleton>
-      </div>
-
-      <div className="flex flex-col lg:flex-row gap-6 lg:gap-12 xl:gap-24">
-        <div className="lg:w-3/4">
-          <div className="grid sm:gap-12">
-            <SkeletonCard />
-            <Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
-            <SkeletonCard />
-            <Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
-            <SkeletonCard />
-            <Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
-            <SkeletonCard />
-            <Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
-            <SkeletonCard />
-            <Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
-            <SkeletonCard />
-          </div>
-        </div>
-        <Skeleton className="bg-[#a1a1a1] rounded-none lg:w-1/4"></Skeleton>
+        ))}
       </div>
     </div>
   );
diff --git a/data/menu.ts b/data/menu.ts
@@ -5,7 +5,7 @@ type MenuItem = {
 
 const menu: MenuItem[] = [
   {
-    href: "/magazine",
+    href: "/posts",
     label: "Posts",
   },
   // {
diff --git a/public/images/titles/Magazine.svg b/public/images/titles/Magazine.svg
@@ -1,10 +1,16 @@
-<svg width="1520" height="215" viewBox="0 0 1520 215" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M93.591 210.436H130.051L184.598 72.3465V210.436H224.217V4.30633H171.966L111.965 157.038L52.2502 4.30633H0V210.436H39.6183V73.4948L93.591 210.436Z" fill="black"/>
-<path d="M404.145 210.436H450.941L374.001 4.30633H326.344L248.83 210.436H292.755L308.545 166.225H388.642L404.145 210.436ZM349.024 51.9631L376.585 131.487H320.889L349.024 51.9631Z" fill="black"/>
-<path d="M558.162 214.743C623.905 214.743 664.672 166.512 662.088 99.3328H555.865V134.071H615.58C609.838 159.622 590.603 177.708 560.171 177.708C518.831 177.708 496.725 147.277 496.725 107.658C496.725 63.4467 521.989 39.0441 555.291 39.0441C582.851 39.0441 601.799 54.834 608.115 75.7915H659.504C646.011 31.0056 608.689 0 556.439 0C496.151 0 451.939 45.6472 451.939 106.51C451.939 170.244 498.447 214.743 558.162 214.743Z" fill="black"/>
-<path d="M819.359 210.436H866.155L789.215 4.30633H741.558L664.044 210.436H707.968L723.758 166.225H803.856L819.359 210.436ZM764.238 51.9631L791.798 131.487H736.103L764.238 51.9631Z" fill="black"/>
-<path d="M1044.28 210.436V172.828H934.903L1040.84 39.3312V4.30633H882.079V41.915H987.154L881.792 175.986V210.436H1044.28Z" fill="black"/>
-<path d="M1119.66 210.436V4.30633H1076.02V210.436H1119.66Z" fill="black"/>
-<path d="M1296.17 210.436H1338.95V4.30633H1298.76V140.961L1208.9 4.30633H1161.81V210.436H1201.72V66.6047L1296.17 210.436Z" fill="black"/>
-<path d="M1520 172.541H1424.97V123.161H1509.38V85.5526H1424.97V42.2021H1517.99V4.30633H1381.34V210.436H1520V172.541Z" fill="black"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1520 215">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #8a2be2;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M373.8,142.8h-32.3v65.7h-43.5V7h75.8c16.8,0,31.2,2.5,43.3,7.6,12.1,5.1,21.4,12.5,28,22.5,6.6,9.9,9.9,22.3,9.9,37.1s-3.3,27-9.9,37.3c-6.6,10.3-15.9,18.1-28,23.4-12.1,5.3-26.6,8-43.3,8ZM373.5,42.9h-32v64h32c12.2,0,21.6-2.9,28.3-8.8,6.7-5.9,10-13.8,10-23.7s-3.3-17.6-10-23.2c-6.7-5.5-16.1-8.3-28.3-8.3Z"/>
+  <path class="st0" d="M577.4,212.7c-14.9,0-28.6-2.6-41.3-7.9-12.7-5.2-23.8-12.6-33.3-22-9.5-9.4-17-20.6-22.3-33.4-5.3-12.8-8-26.8-8-42s2.7-29.1,8-41.8c5.3-12.7,12.8-23.8,22.3-33.1,9.5-9.4,20.6-16.7,33.3-21.9,12.7-5.2,26.5-7.9,41.3-7.9s28.7,2.6,41.5,7.9c12.8,5.2,24,12.5,33.6,21.9,9.6,9.4,17.1,20.4,22.5,33.1,5.3,12.7,8,26.7,8,41.8s-2.7,29.2-8,42c-5.3,12.8-12.8,24-22.5,33.4-9.6,9.5-20.8,16.8-33.6,22-12.8,5.2-26.6,7.9-41.5,7.9ZM577.4,174.6c9.3,0,17.8-1.7,25.3-5.2,7.5-3.5,13.9-8.3,19.2-14.5,5.2-6.2,9.2-13.3,12-21.5,2.8-8.1,4.1-16.8,4.1-26s-1.4-17.8-4.1-25.8c-2.8-8-6.8-15.1-12-21.2-5.2-6.1-11.6-10.9-19.2-14.3-7.5-3.5-16-5.2-25.3-5.2s-17.7,1.7-25.2,5.2c-7.4,3.5-13.8,8.2-19,14.3-5.2,6.1-9.2,13.2-12,21.2-2.8,8-4.1,16.7-4.1,25.8s1.4,17.8,4.1,26c2.8,8.1,6.8,15.3,12,21.5,5.2,6.2,11.6,11,19,14.5,7.4,3.5,15.8,5.2,25.2,5.2Z"/>
+  <path class="st0" d="M870.5,145.9c0,12.7-3.3,24-10,33.8-6.7,9.8-16.2,17.5-28.5,23.2-12.3,5.6-27.1,8.4-44.5,8.4s-32.1-2.9-44.8-8.6c-12.7-5.7-22.6-13.8-29.9-24.3-7.2-10.5-11.4-22.8-12.6-37.1h44c.6,11.2,4.4,20.1,11.6,26.7,7.2,6.6,17.4,9.8,30.7,9.8s14-1,19.6-3.1c5.6-2.1,10.1-5.1,13.3-9,3.2-3.9,4.9-8.5,4.9-13.8s-2.4-11.5-7.2-15.3c-4.8-3.8-11.5-6.6-20.3-8.3l-33.7-6.5c-7.8-1.3-15.1-3.5-21.7-6.5-6.7-3-12.5-6.7-17.4-11.2-5-4.5-8.9-9.9-11.7-16.3-2.9-6.4-4.3-13.7-4.3-21.9,0-12,3.3-22.6,9.9-32,6.6-9.4,15.6-16.7,27.2-21.9,11.5-5.2,24.7-7.9,39.6-7.9s29.2,2.8,41.2,8.4c12,5.6,21.7,13.5,29.2,23.7,7.4,10.2,11.5,22.3,12.3,36.4h-44c-.4-7.1-2.2-13.3-5.6-18.7-3.3-5.3-7.8-9.4-13.3-12.4-5.5-2.9-11.9-4.4-19.2-4.4s-13,1.2-17.9,3.5c-4.9,2.3-8.6,5.4-11.3,9.3-2.7,3.8-4,8.2-4,13.1s1.3,8.2,3.9,11.2c2.6,3,6,5.4,10.2,7.2,4.2,1.8,8.8,3.1,13.7,4.1l35.2,7c18.1,3.6,31.9,9.6,41.3,18.1,9.4,8.5,14.2,20.2,14.2,35Z"/>
+  <path class="st0" d="M988.1,208.5h-43.5V45.4h-64.6V7h173v38.5h-64.9v163.1Z"/>
+  <path class="st0" d="M1232.3,145.9c0,12.7-3.3,24-10,33.8-6.7,9.8-16.2,17.5-28.5,23.2s-27.1,8.4-44.5,8.4-32.1-2.9-44.8-8.6c-12.7-5.7-22.6-13.8-29.9-24.3-7.2-10.5-11.4-22.8-12.6-37.1h44c.6,11.2,4.4,20.1,11.6,26.7,7.2,6.6,17.4,9.8,30.7,9.8s14-1,19.6-3.1c5.6-2.1,10.1-5.1,13.3-9,3.2-3.9,4.9-8.5,4.9-13.8s-2.4-11.5-7.2-15.3c-4.8-3.8-11.5-6.6-20.3-8.3l-33.7-6.5c-7.8-1.3-15.1-3.5-21.7-6.5-6.7-3-12.5-6.7-17.4-11.2-5-4.5-8.9-9.9-11.7-16.3-2.9-6.4-4.3-13.7-4.3-21.9,0-12,3.3-22.6,9.9-32,6.6-9.4,15.6-16.7,27.2-21.9,11.5-5.2,24.7-7.9,39.6-7.9s29.2,2.8,41.2,8.4c12,5.6,21.7,13.5,29.2,23.7,7.4,10.2,11.5,22.3,12.3,36.4h-44c-.4-7.1-2.2-13.3-5.6-18.7-3.3-5.3-7.8-9.4-13.3-12.4-5.5-2.9-11.9-4.4-19.2-4.4s-13,1.2-17.9,3.5c-4.9,2.3-8.6,5.4-11.3,9.3-2.7,3.8-4,8.2-4,13.1s1.3,8.2,3.9,11.2c2.6,3,6,5.4,10.2,7.2,4.2,1.8,8.8,3.1,13.7,4.1l35.2,7c18.1,3.6,31.9,9.6,41.3,18.1,9.4,8.5,14.2,20.2,14.2,35Z"/>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ type MenuItem = {`
`5`	`5`
`6`	`6`	`const menu: MenuItem[] = [`
`7`	`7`	`{`
`8`		`- href: "/magazine",`
	`8`	`+ href: "/posts",`
`9`	`9`	`label: "Posts",`
`10`	`10`	`},`
`11`	`11`	`// {`