Merge pull request #256 from duyet/chore/ui

chore: suspend load header components
duyet · May 27, 2024 · 5e3ecce · 5e3ecce
2 parents c88bfde + e6c227e
commit 5e3ecce
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/...]/@materializedview/materialized-view.tsx → ...abase]/[table]/@materializedview/page.tsx b/...]/@materializedview/materialized-view.tsx → ...abase]/[table]/@materializedview/page.tsx
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,8 @@ 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'
+import { SingleLineSkeleton } from './skeleton'
 
 const TITLE = process.env.NEXT_PUBLIC_TITLE || 'ClickHouse Monitoring'
 const TITLE_SHORT = process.env.NEXT_PUBLIC_TITLE_SHORT || 'Monitoring'
@@ -24,13 +26,19 @@ 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
+          fallback={<SingleLineSkeleton className="w-[200px] space-x-0 pt-0" />}
+        >
+          <Menu />
+          <ReloadButton />
+        </Suspense>
       </div>
     </div>
   )

diff --git 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>
   )
 }