boring.tools/boring.tools-poc
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(app): sidebar loading state
All checks were successful
Build and Push Docker Image / tests (push) Successful in 54s
Details
Build and Push Docker Image / build (push) Successful in 3m55s
Details

Browse Source
This commit is contained in:
Lars Hampe 2024-11-10 22:37:23 +01:00
parent d461acc3f4
commit 714da23d04
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/app/src/components/SidebarChangelog.tsx
View File

@ -19,7 +19,7 @@ import { useChangelogList } from '../hooks/useChangelog'
export const SidebarChangelog = () => { export const SidebarChangelog = () => {
const location = useLocation() const location = useLocation()
const [value, setValue] = useLocalStorage('sidebar-changelog-open', false) const [value, setValue] = useLocalStorage('sidebar-changelog-open', false)
const { data, error } = useChangelogList() const { data, error, isLoading } = useChangelogList()
useEffect(() => { useEffect(() => {
const firstElement = location.href.split('/')[1] const firstElement = location.href.split('/')[1]
@ -50,6 +50,16 @@ export const SidebarChangelog = () => {
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<SidebarMenuSub> <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 && {!error &&
data?.map((changelog) => ( data?.map((changelog) => (
<SidebarMenuSubItem key={changelog.id}> <SidebarMenuSubItem key={changelog.id}>

12
apps/app/src/components/SidebarPage.tsx
View File

@ -19,7 +19,7 @@ import { usePageList } from '../hooks/usePage'
export const SidebarPage = () => { export const SidebarPage = () => {
const location = useLocation() const location = useLocation()
const [value, setValue] = useLocalStorage('sidebar-page-open', false) const [value, setValue] = useLocalStorage('sidebar-page-open', false)
const { data, error } = usePageList() const { data, error, isLoading } = usePageList()
useEffect(() => { useEffect(() => {
const firstElement = location.href.split('/')[1] const firstElement = location.href.split('/')[1]
@ -47,6 +47,16 @@ export const SidebarPage = () => {
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
<SidebarMenuSub> <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 && {!error &&
data?.map((page) => ( data?.map((page) => (
<SidebarMenuSubItem key={page.id}> <SidebarMenuSubItem key={page.id}>