From e6c227e11aaf1d40092fc1a54a754a0e632ac6d5 Mon Sep 17 00:00:00 2001
From: Duyet Le <me@duyet.net>
Date: Tue, 28 May 2024 00:30:43 +0700
Subject: [PATCH] chore(ui): menu suspend add fallback prop

---
 components/header.tsx   |  5 ++++-
 components/skeleton.tsx | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/header.tsx b/components/header.tsx
index b98a9628..792ad0bb 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -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'
@@ -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>
diff --git a/components/skeleton.tsx b/components/skeleton.tsx
index fc47e9e8..abde7f30 100644
--- a/components/skeleton.tsx
+++ b/components/skeleton.tsx
@@ -1,4 +1,5 @@
 import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
 
 export function ChartSkeleton() {
   return (
@@ -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>
   )
 }