feat(client): add entry list loading skeleton to aside

apps/client/src/components/feature/aside-nav/components/entry-list/entry-list-skeleton.component.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function EntryListSkeleton() {
+  return (
+    <ul className="w-full flex flex-col gap-2">
+      {Array(9)
+        .fill("")
+        .map((_, index) => (
+          <li key={index} className="flex flex-col p-2 gap-2">
+            <Skeleton
+              className={`${index % 2 === 0 ? "w-44" : "w-24"} h-4 rounded-md`}
+            />
+            <Skeleton className="w-36 h-3 rounded-md" />
+          </li>
+        ))}
+    </ul>
+  );
+}

apps/client/src/components/feature/aside-nav/views/desktop/desktop.view.component.tsx

@@ -1,14 +1,17 @@
 import { Hr } from "@/components/ui/hr";
-import { type ReactNode } from "react";
+import { Suspense, type ReactNode } from "react";
 import { EntryList } from "../../components/entry-list";
+import { EntryListSkeleton } from "../../components/entry-list/entry-list-skeleton.component";
 
 export function DesktopAsideView({ children }: { children: ReactNode }) {
   return (
     <>
       <aside className="max-w-80 w-full h-full min-h-screen p-2 flex gap-2 flex-col items-center border-r border-neutral-200">
         {children}
         <Hr orientation="horizontal" className="my-1" />
-        <EntryList />
+        <Suspense fallback={<EntryListSkeleton />}>
+          <EntryList />
+        </Suspense>
       </aside>
     </>
   );