's'

app/components/HomePageSkeleton.tsx

@@ -0,0 +1,63 @@
+function SkeletonBlocks() {
+  return (
+    <div className="space-y-6">
+      <div className="mx-auto h-9 max-w-lg rounded-lg bg-[var(--muted)] animate-pulse" />
+      <div className="mx-auto h-[min(40vh,280px)] w-full max-w-3xl rounded-2xl bg-[var(--muted)]/70 animate-pulse" />
+      <div className="flex flex-wrap justify-center gap-3">
+        <div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
+        <div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
+      </div>
+      <div className="mx-auto mt-8 max-w-2xl space-y-3">
+        <div className="h-4 w-full rounded bg-[var(--muted)] animate-pulse" />
+        <div className="h-4 w-[90%] rounded bg-[var(--muted)] animate-pulse" />
+        <div className="h-4 w-[75%] rounded bg-[var(--muted)] animate-pulse" />
+      </div>
+    </div>
+  );
+}
+
+type HomePageSkeletonProps = {
+  className?: string;
+  /** full：整页含顶栏；main：仅主内容区（已包在 VipLayout 内时用） */
+  variant?: "full" | "main";
+};
+
+/**
+ * 首页骨架（Server/Client 均可引用），保证首屏 HTML 即有可见结构，避免白屏。
+ */
+export function HomePageSkeleton({
+  className = "",
+  variant = "full",
+}: HomePageSkeletonProps) {
+  const main = (
+    <main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-8 sm:px-6">
+      <SkeletonBlocks />
+    </main>
+  );
+
+  if (variant === "main") {
+    return (
+      <div
+        className={`min-h-[50vh] bg-[var(--background)] text-[var(--foreground)] ${className}`}
+        aria-busy="true"
+        aria-label="页面加载中"
+      >
+        {main}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`flex min-h-screen flex-col bg-[var(--background)] text-[var(--foreground)] ${className}`}
+      aria-busy="true"
+      aria-label="页面加载中"
+    >
+      <header className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3 sm:px-6">
+        <div className="h-7 w-28 rounded-md bg-[var(--muted)] animate-pulse" />
+        <div className="h-9 w-24 rounded-lg bg-[var(--muted)] animate-pulse" />
+      </header>
+      {main}
+    </div>
+  );
+}