From a0c202546e3beb749d91d3c4f630691754ef2702 Mon Sep 17 00:00:00 2001
From: tuyenio <tt98tuyen@gmail.com>
Date: Thu, 25 Jun 2026 09:31:52 +0700
Subject: [PATCH] =?UTF-8?q?perf:=20dynamic=20import=20viewer=20three.js=20?=
 =?UTF-8?q?(t=C3=A1ch=20kh=E1=BB=8Fi=20bundle=20ch=C3=ADnh)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/app/co-vat/AntiquityShowcaseClient.tsx | 20 ++++++++++++++++++++
 src/app/co-vat/page.tsx                    |  4 ++--
 src/app/tour/chua-thai-lac/TourClient.tsx  | 16 ++++++++++++++++
 src/app/tour/chua-thai-lac/page.tsx        |  4 ++--
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/app/co-vat/AntiquityShowcaseClient.tsx
 create mode 100644 src/app/tour/chua-thai-lac/TourClient.tsx

diff --git a/src/app/co-vat/AntiquityShowcaseClient.tsx b/src/app/co-vat/AntiquityShowcaseClient.tsx
new file mode 100644
index 0000000..28096ca
--- /dev/null
+++ b/src/app/co-vat/AntiquityShowcaseClient.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { Antiquity } from "@/app/content";
+
+const AntiquityShowcase = dynamic(
+  () => import("@/app/components/antiquity/AntiquityShowcase").then((m) => m.AntiquityShowcase),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center text-sm text-[var(--muted-foreground)] sm:px-6">
+        Đang tải phòng trưng bày 3D…
+      </div>
+    ),
+  },
+);
+
+export default function AntiquityShowcaseClient({ items }: { items: Antiquity[] }) {
+  return <AntiquityShowcase items={items} />;
+}
diff --git a/src/app/co-vat/page.tsx b/src/app/co-vat/page.tsx
index 469630b..d019e9e 100644
--- a/src/app/co-vat/page.tsx
+++ b/src/app/co-vat/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import Image from "next/image";
 import { Boxes, ScanLine, Sparkles } from "lucide-react";
-import { AntiquityShowcase } from "@/app/components/antiquity/AntiquityShowcase";
+import AntiquityShowcaseClient from "./AntiquityShowcaseClient";
 import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
 import { SiteFooter } from "@/app/components/landing/SiteFooter";
 import { SiteHeader } from "@/app/components/landing/SiteHeader";
@@ -40,7 +40,7 @@ export default function AntiquityPage() {
         </div>
       </section>
 
-      <AntiquityShowcase items={antiquities} />
+      <AntiquityShowcaseClient items={antiquities} />
 
       <section className="border-t border-[var(--surface-border)] bg-[var(--surface-band)]">
         <div className="mx-auto grid max-w-7xl gap-4 px-4 py-14 sm:px-6 md:grid-cols-3 lg:py-18">
diff --git a/src/app/tour/chua-thai-lac/TourClient.tsx b/src/app/tour/chua-thai-lac/TourClient.tsx
new file mode 100644
index 0000000..c7d9a5b
--- /dev/null
+++ b/src/app/tour/chua-thai-lac/TourClient.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const VirtualTour = dynamic(() => import("@/app/components/VirtualTour"), {
+  ssr: false,
+  loading: () => (
+    <div className="grid min-h-[100dvh] place-items-center bg-[#f5f1e6] text-[#4a3f35]">
+      <p className="text-sm font-bold">Đang tải không gian 360°…</p>
+    </div>
+  ),
+});
+
+export default function TourClient({ tourId }: { tourId?: string }) {
+  return <VirtualTour tourId={tourId} />;
+}
diff --git a/src/app/tour/chua-thai-lac/page.tsx b/src/app/tour/chua-thai-lac/page.tsx
index 1c29f06..e0c1f37 100644
--- a/src/app/tour/chua-thai-lac/page.tsx
+++ b/src/app/tour/chua-thai-lac/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import VirtualTour from "@/app/components/VirtualTour";
+import TourClient from "./TourClient";
 
 export const metadata: Metadata = {
   title: "VR360 Chùa Thái Lạc (Pháp Vân tự)",
@@ -8,5 +8,5 @@ export const metadata: Metadata = {
 };
 
 export default function ChuaThaiLacTourPage() {
-  return <VirtualTour tourId="chua-thai-lac" />;
+  return <TourClient tourId="chua-thai-lac" />;
 }