From 714da23d04e849dc15cd2ebee4fc2327b24067c5 Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Sun, 10 Nov 2024 22:37:23 +0100
Subject: [PATCH] feat(app): sidebar loading state

---
 apps/app/src/components/SidebarChangelog.tsx | 12 +++++++++++-
 apps/app/src/components/SidebarPage.tsx      | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/SidebarChangelog.tsx b/apps/app/src/components/SidebarChangelog.tsx
index b0b06d4..8e2c9d8 100644
--- a/apps/app/src/components/SidebarChangelog.tsx
+++ b/apps/app/src/components/SidebarChangelog.tsx
@@ -19,7 +19,7 @@ import { useChangelogList } from '../hooks/useChangelog'
 export const SidebarChangelog = () => {
   const location = useLocation()
   const [value, setValue] = useLocalStorage('sidebar-changelog-open', false)
-  const { data, error } = useChangelogList()
+  const { data, error, isLoading } = useChangelogList()
 
   useEffect(() => {
     const firstElement = location.href.split('/')[1]
@@ -50,6 +50,16 @@ export const SidebarChangelog = () => {
           </CollapsibleTrigger>
           <CollapsibleContent>
             <SidebarMenuSub>
+              {isLoading && !data && (
+                <div className="flex flex-col gap-1 animate-pulse">
+                  <SidebarMenuSubItem>
+                    <div className="w-[100px] h-[20px] bg-border rounded" />
+                  </SidebarMenuSubItem>
+                  <SidebarMenuSubItem>
+                    <div className="w-[130px] h-[20px] bg-border rounded" />
+                  </SidebarMenuSubItem>
+                </div>
+              )}
               {!error &&
                 data?.map((changelog) => (
                   <SidebarMenuSubItem key={changelog.id}>
diff --git a/apps/app/src/components/SidebarPage.tsx b/apps/app/src/components/SidebarPage.tsx
index 92beb2f..d862a9f 100644
--- a/apps/app/src/components/SidebarPage.tsx
+++ b/apps/app/src/components/SidebarPage.tsx
@@ -19,7 +19,7 @@ import { usePageList } from '../hooks/usePage'
 export const SidebarPage = () => {
   const location = useLocation()
   const [value, setValue] = useLocalStorage('sidebar-page-open', false)
-  const { data, error } = usePageList()
+  const { data, error, isLoading } = usePageList()
 
   useEffect(() => {
     const firstElement = location.href.split('/')[1]
@@ -47,6 +47,16 @@ export const SidebarPage = () => {
           </CollapsibleTrigger>
           <CollapsibleContent>
             <SidebarMenuSub>
+              {isLoading && !data && (
+                <div className="flex flex-col gap-1 animate-pulse">
+                  <SidebarMenuSubItem>
+                    <div className="w-[100px] h-[20px] bg-border rounded" />
+                  </SidebarMenuSubItem>
+                  <SidebarMenuSubItem>
+                    <div className="w-[130px] h-[20px] bg-border rounded" />
+                  </SidebarMenuSubItem>
+                </div>
+              )}
               {!error &&
                 data?.map((page) => (
                   <SidebarMenuSubItem key={page.id}>