Skip to content

Commit

Permalink
chore(ui): menu suspend add fallback prop
Browse files Browse the repository at this point in the history
  • Loading branch information
duyet committed May 27, 2024
1 parent f652e35 commit e6c227e
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
5 changes: 4 additions & 1 deletion components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ClickHouseHost } from '@/components/clickhouse-host'
import { Menu } from '@/components/menu/menu'
import { ReloadButton } from '@/components/reload-button'
import { Suspense } from 'react'
import { SingleLineSkeleton } from './skeleton'

const TITLE = process.env.NEXT_PUBLIC_TITLE || 'ClickHouse Monitoring'
const TITLE_SHORT = process.env.NEXT_PUBLIC_TITLE_SHORT || 'Monitoring'
Expand Down Expand Up @@ -32,7 +33,9 @@ export function Header() {
</div>
</div>
<div className="flex items-center space-x-2">
<Suspense>
<Suspense
fallback={<SingleLineSkeleton className="w-[200px] space-x-0 pt-0" />}
>
<Menu />
<ReloadButton />
</Suspense>
Expand Down
18 changes: 14 additions & 4 deletions components/skeleton.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Skeleton } from '@/components/ui/skeleton'
import { cn } from '@/lib/utils'

export function ChartSkeleton() {
return (
Expand Down Expand Up @@ -35,11 +36,20 @@ export function TableSkeleton({
)
}

export function SingleLineSkeleton() {
export function SingleLineSkeleton({
className = 'w-[500px]',
}: {
className?: string
}) {
return (
<div className="flex flex-row items-center space-x-4 pt-5">
<Skeleton className="h-6 w-[300px] bg-slate-200" />
<Skeleton className="h-6 w-[200px] bg-slate-200" />
<div
className={cn(
'flex flex-row items-center gap-2 space-x-4 pt-5',
className
)}
>
<Skeleton className="h-6 w-3/5 bg-slate-200" />
<Skeleton className="h-6 w-2/5 bg-slate-200" />
</div>
)
}

0 comments on commit e6c227e

Please sign in to comment.