From e50c92e959b17471219f9abf129ce6f77ebcc563 Mon Sep 17 00:00:00 2001
From: Duyet Le <me@duyet.net>
Date: Mon, 18 Nov 2024 00:51:47 +0700
Subject: [PATCH] feat: enhance loading component styling; implement caching
 for database list retrieval

---
 .../database/[database]/@nav/loading.tsx      |  2 +-
 app/[host]/database/[database]/@nav/nav.tsx   | 43 +++++++++++++------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/app/[host]/database/[database]/@nav/loading.tsx b/app/[host]/database/[database]/@nav/loading.tsx
index ae451296..86cd9f27 100644
--- a/app/[host]/database/[database]/@nav/loading.tsx
+++ b/app/[host]/database/[database]/@nav/loading.tsx
@@ -1,5 +1,5 @@
 import { ListSkeleton } from '@/components/skeleton'
 
 export default function Loading() {
-  return <ListSkeleton className="w-[250px]" nrows={5} />
+  return <ListSkeleton className="w-full p-2" nrows={5} />
 }
diff --git a/app/[host]/database/[database]/@nav/nav.tsx b/app/[host]/database/[database]/@nav/nav.tsx
index 5c2a3e19..0add9bd8 100644
--- a/app/[host]/database/[database]/@nav/nav.tsx
+++ b/app/[host]/database/[database]/@nav/nav.tsx
@@ -6,6 +6,7 @@ import { ErrorAlert } from '@/components/error-alert'
 import { fetchData } from '@/lib/clickhouse'
 import { cn } from '@/lib/utils'
 
+import { cache } from 'react'
 import { listDatabases } from '../../queries'
 import { DatabaseBreadcrumb } from './breadcrumb'
 
@@ -21,25 +22,32 @@ interface DatabaseCount {
   count: number
 }
 
+export const getListDatabaseCached = cache(async () => {
+  return fetchData({
+    query: listDatabases,
+    clickhouse_settings: {
+      use_query_cache: 1,
+      query_cache_system_table_handling: 'save',
+      query_cache_ttl: 300,
+    },
+  })
+})
+
+export const preload = async (host: number) => {
+  void (await getListDatabaseCached())
+}
+
 export async function Nav({ host, database, collapsible }: Props) {
+  preload(host)
   let databases: DatabaseCount[] = []
 
   try {
-    // List database names and number of tables
-    const data = (await fetchData({
-      query: listDatabases,
-      clickhouse_settings: {
-        use_query_cache: 1,
-        query_cache_system_table_handling: 'save',
-        query_cache_ttl: 300,
-      },
-    })) satisfies { data: DatabaseCount[] }
-
-    databases = data.data
+    const data = await getListDatabaseCached()
+    databases = data.data as DatabaseCount[]
   } catch (e: any) {
     return (
       <ErrorAlert
-        title="Breadcrumb: could not getting list database"
+        title="Breadcrumb: could not get list database"
         message={`${e}`}
         query={listDatabases}
       />
@@ -104,12 +112,19 @@ function Sidebar({
               'hover:bg-accent hover:text-accent-foreground',
               'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
               'disabled:pointer-events-none disabled:opacity-50',
-              db.name === current && 'bg-secondary'
+              db.name === current && 'bg-secondary font-bold'
             )}
           >
             <div className="inline-flex w-full items-center justify-start gap-2 p-1">
               <Database className="m-0 h-4 w-4 flex-none p-0" />
-              <span className="flex-1 overflow-hidden truncate">{db.name}</span>
+              <span
+                className={cn(
+                  'flex-1 overflow-hidden truncate',
+                  db.name === current && 'font-semibold'
+                )}
+              >
+                {db.name}
+              </span>
               <Count>{db.count}</Count>
             </div>
           </Link>