chore: refactor /about

app/[host]/about/page.tsx

@@ -1,97 +1,17 @@
-import { GitHubLogoIcon } from '@radix-ui/react-icons'
-import { ExternalLink } from 'lucide-react'
-import Link from 'next/link'
 import { Suspense } from 'react'
 
 import { ClickHouseInfo } from '@/components/overview-charts/clickhouse-info'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import packageInfo from '@/package.json'
+import { MultiLineSkeleton } from '@/components/skeleton'
+import { UIInfo } from './ui-info'
 
 export const dynamic = 'force-static'
 
-function getVersion(): { version: string; url: string | null } {
-  // Get env variables
-  const sha = process.env.GITHUB_SHA || process.env.VERCEL_GIT_COMMIT_SHA
-  const ref = process.env.GITHUB_REF || process.env.VERCEL_GIT_COMMIT_REF
-
-  // Check for tag version (e.g. refs/tags/v0.1.11)
-  const tagMatch = ref?.match(/refs\/tags\/(v\d+\.\d+\.\d+)/)
-  if (tagMatch) {
-    return {
-      version: tagMatch[1],
-      url: `${packageInfo.repository.url}/releases/tag/${tagMatch[1]}`,
-    }
-  }
-
-  // Use short commit hash if available
-  if (sha) {
-    return {
-      version: sha.slice(0, 7), // First 7 characters of commit hash
-      url: `${packageInfo.repository.url}/commit/${sha}`,
-    }
-  }
-
-  // Fallback
-  return {
-    version: 'N/A',
-    url: null,
-  }
-}
-
-export default async function AboutPage() {
-  const githubUrl = packageInfo.repository.url
-  const { version, url } = getVersion()
-
+export default async function About() {
   return (
     <div className="container mx-auto flex flex-col gap-8 px-4 py-8 md:flex-row">
-      <Card className="min-w-md max-w-md rounded shadow-none">
-        <CardHeader>
-          <CardTitle className="text-xl font-bold">
-            ClickHouse Monitoring
-          </CardTitle>
-          <CardDescription>{packageInfo.description}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex flex-col justify-between sm:flex-row sm:items-center">
-            <span className="font-semibold">UI Version:</span>
-            {url ? (
-              <Link
-                href={url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center text-blue-500 hover:underline"
-              >
-                {version}
-                <ExternalLink className="ml-1 h-4 w-4" />
-              </Link>
-            ) : (
-              <span>{version}</span>
-            )}
-          </div>
-
-          <div className="flex flex-col justify-between sm:flex-row sm:items-center">
-            <span className="truncate font-semibold">GitHub Repository:</span>
-            <Link
-              href={githubUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex flex-none items-center truncate text-blue-500 hover:underline"
-            >
-              <GitHubLogoIcon className="mr-1 h-4 w-4" />
-              View on GitHub
-              <ExternalLink className="ml-1 h-4 w-4" />
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
+      <UIInfo />
 
-      <Suspense>
+      <Suspense fallback={<MultiLineSkeleton />}>
         <ClickHouseInfo
           className="min-w-md max-w-md content-normal"
           contentClassName="p-6 pt-0 gap-2"

app/[host]/about/ui-info.tsx

@@ -0,0 +1,91 @@
+import { GitHubLogoIcon } from '@radix-ui/react-icons'
+import { ExternalLink } from 'lucide-react'
+import Link from 'next/link'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import packageInfo from '@/package.json'
+
+export const dynamic = 'force-static'
+
+function getVersion(): { version: string; url: string | null } {
+  // Get env variables
+  const sha = process.env.GITHUB_SHA || process.env.VERCEL_GIT_COMMIT_SHA
+  const ref = process.env.GITHUB_REF || process.env.VERCEL_GIT_COMMIT_REF
+
+  // Check for tag version (e.g. refs/tags/v0.1.11)
+  const tagMatch = ref?.match(/refs\/tags\/(v\d+\.\d+\.\d+)/)
+  if (tagMatch) {
+    return {
+      version: tagMatch[1],
+      url: `${packageInfo.repository.url}/releases/tag/${tagMatch[1]}`,
+    }
+  }
+
+  // Use short commit hash if available
+  if (sha) {
+    return {
+      version: sha.slice(0, 7), // First 7 characters of commit hash
+      url: `${packageInfo.repository.url}/commit/${sha}`,
+    }
+  }
+
+  // Fallback
+  return {
+    version: 'N/A',
+    url: null,
+  }
+}
+
+export async function UIInfo() {
+  const githubUrl = packageInfo.repository.url
+  const { version, url } = getVersion()
+
+  return (
+    <Card className="min-w-md max-w-md rounded shadow-none">
+      <CardHeader>
+        <CardTitle className="text-xl font-bold">
+          ClickHouse Monitoring
+        </CardTitle>
+        <CardDescription>{packageInfo.description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-col justify-between sm:flex-row sm:items-center">
+          <span className="font-semibold">UI Version:</span>
+          {url ? (
+            <Link
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center text-blue-500 hover:underline"
+            >
+              {version}
+              <ExternalLink className="ml-1 h-4 w-4" />
+            </Link>
+          ) : (
+            <span>{version}</span>
+          )}
+        </div>
+
+        <div className="flex flex-col justify-between sm:flex-row sm:items-center">
+          <span className="truncate font-semibold">GitHub Repository:</span>
+          <Link
+            href={githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex flex-none items-center truncate text-blue-500 hover:underline"
+          >
+            <GitHubLogoIcon className="mr-1 h-4 w-4" />
+            View on GitHub
+            <ExternalLink className="ml-1 h-4 w-4" />
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package.json

@@ -54,7 +54,7 @@
     "dayjs": "^1.11.10",
     "dedent": "^1.5.3",
     "lucide-react": "^0.456.0",
-    "next": "^15.0.2",
+    "next": "^15.0.3",
     "radix-ui": "^1.0.1",
     "react": "^19.0.0-rc-0bc30748-20241028",
     "react-dom": "^19.0.0-rc-0bc30748-20241028",

yarn.lock

@@ -5551,7 +5551,7 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@^15.0.2:
+next@^15.0.3:
   version "15.0.3"
   resolved "https://registry.yarnpkg.com/next/-/next-15.0.3.tgz#804f5b772e7570ef1f088542a59860914d3288e9"
   integrity sha512-ontCbCRKJUIoivAdGB34yCaOcPgYXr9AAkV/IwqFfWWTXEPUgLYkSkqBhIk9KK7gGmgjc64B+RdoeIDM13Irnw==