chore: suspend load header components

duyet · May 27, 2024 · f652e35 · f652e35
1 parent c2ee492
commit f652e35
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/components/clickhouse-host.tsx b/components/clickhouse-host.tsx
@@ -54,16 +54,14 @@ export async function ClickHouseHost() {
 
   if (hosts.length === 1) {
     return (
-      <div className="mt-2">
-        <div className="flex flex-row items-center gap-2">
-          <HostStatus host={hosts[0]} />
-        </div>
+      <div className="flex flex-row items-center gap-2">
+        <HostStatus host={hosts[0]} />
       </div>
     )
   }
 
   return (
-    <div className="mt-2">
+    <div>
       <Select>
         <SelectTrigger>
           <SelectValue placeholder={hosts[0]} />

diff --git a/components/header.tsx b/components/header.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { ClickHouseHost } from '@/components/clickhouse-host'
 import { Menu } from '@/components/menu/menu'
 import { ReloadButton } from '@/components/reload-button'
+import { Suspense } from 'react'
 
 const TITLE = process.env.NEXT_PUBLIC_TITLE || 'ClickHouse Monitoring'
 const TITLE_SHORT = process.env.NEXT_PUBLIC_TITLE_SHORT || 'Monitoring'
@@ -24,13 +25,17 @@ export function Header() {
             <span className="flex sm:hidden">{TITLE_SHORT}</span>
           </h2>
           <div className="text-muted-foreground">
-            <ClickHouseHost />
+            <Suspense>
+              <ClickHouseHost />
+            </Suspense>
           </div>
         </div>
       </div>
       <div className="flex items-center space-x-2">
-        <Menu />
-        <ReloadButton />
+        <Suspense>
+          <Menu />
+          <ReloadButton />
+        </Suspense>
       </div>
     </div>
   )