From 569beb0b36b3a280b671674ac301211b6a854844 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Wed, 16 Apr 2025 18:05:55 +0800
Subject: [PATCH] feat(layout): add layout with suspense boundary for problem

---
 src/app/(app)/problems/[id]/@Bot/layout.tsx   | 16 +++++++++++++++
 src/app/(app)/problems/[id]/@Bot/page.tsx     |  4 ++--
 src/app/(app)/problems/[id]/@Code/layout.tsx  | 20 +++++++++++++++++++
 src/app/(app)/problems/[id]/@Code/page.tsx    | 12 +++--------
 .../problems/[id]/@Description/layout.tsx     | 16 +++++++++++++++
 .../(app)/problems/[id]/@Description/page.tsx |  4 ++--
 .../(app)/problems/[id]/@Details/layout.tsx   | 20 +++++++++++++------
 src/app/(app)/problems/[id]/@Details/page.tsx |  4 ++--
 .../(app)/problems/[id]/@Solutions/layout.tsx | 16 +++++++++++++++
 .../(app)/problems/[id]/@Solutions/page.tsx   |  4 ++--
 .../problems/[id]/@Submissions/layout.tsx     | 16 +++++++++++++++
 .../(app)/problems/[id]/@Submissions/page.tsx |  4 ++--
 .../(app)/problems/[id]/@Testcase/layout.tsx  | 16 +++++++++++++++
 .../(app)/problems/[id]/@Testcase/page.tsx    | 10 ++++------
 14 files changed, 131 insertions(+), 31 deletions(-)
 create mode 100644 src/app/(app)/problems/[id]/@Bot/layout.tsx
 create mode 100644 src/app/(app)/problems/[id]/@Code/layout.tsx
 create mode 100644 src/app/(app)/problems/[id]/@Description/layout.tsx
 create mode 100644 src/app/(app)/problems/[id]/@Solutions/layout.tsx
 create mode 100644 src/app/(app)/problems/[id]/@Submissions/layout.tsx
 create mode 100644 src/app/(app)/problems/[id]/@Testcase/layout.tsx

diff --git a/src/app/(app)/problems/[id]/@Bot/layout.tsx b/src/app/(app)/problems/[id]/@Bot/layout.tsx
new file mode 100644
index 0000000..4de618b
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Bot/layout.tsx
@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+
+interface BotLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function BotLayout({ children }: BotLayoutProps) {
+  return (
+    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Bot/page.tsx b/src/app/(app)/problems/[id]/@Bot/page.tsx
index d0b9020..e21d9f2 100644
--- a/src/app/(app)/problems/[id]/@Bot/page.tsx
+++ b/src/app/(app)/problems/[id]/@Bot/page.tsx
@@ -55,7 +55,7 @@ export default function Bot() {
   );
 
   return (
-    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+    <>
       <div className="flex-1 relative">
         {!messages.some(
           (message) => message.role === "user" || message.role === "assistant"
@@ -122,6 +122,6 @@ export default function Bot() {
           </TooltipProvider>
         </form>
       </footer>
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/problems/[id]/@Code/layout.tsx b/src/app/(app)/problems/[id]/@Code/layout.tsx
new file mode 100644
index 0000000..28b0679
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Code/layout.tsx
@@ -0,0 +1,20 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
+import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
+
+interface CodeLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function CodeLayout({ children }: CodeLayoutProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+      <WorkspaceEditorFooter />
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Code/page.tsx b/src/app/(app)/problems/[id]/@Code/page.tsx
index bb7becf..e56eca7 100644
--- a/src/app/(app)/problems/[id]/@Code/page.tsx
+++ b/src/app/(app)/problems/[id]/@Code/page.tsx
@@ -1,17 +1,11 @@
 import { ProblemEditor } from "@/components/problem-editor";
-import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
-import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
 
 export default function CodePage() {
   return (
-    <div className="flex flex-col h-full">
-      <WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
-      <div className="relative flex-1 border-x border-muted">
-        <div className="absolute w-full h-full">
-          <ProblemEditor />
-        </div>
+    <div className="relative flex-1 border-x border-muted">
+      <div className="absolute w-full h-full">
+        <ProblemEditor />
       </div>
-      <WorkspaceEditorFooter />
     </div>
   );
 }
diff --git a/src/app/(app)/problems/[id]/@Description/layout.tsx b/src/app/(app)/problems/[id]/@Description/layout.tsx
new file mode 100644
index 0000000..0d9f699
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Description/layout.tsx
@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+
+interface DescriptionLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
+  return (
+    <div className="h-full flex flex-col">
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Description/page.tsx b/src/app/(app)/problems/[id]/@Description/page.tsx
index 297525e..6746d7d 100644
--- a/src/app/(app)/problems/[id]/@Description/page.tsx
+++ b/src/app/(app)/problems/[id]/@Description/page.tsx
@@ -28,7 +28,7 @@ export default async function DescriptionPage({ params }: DescriptionPageProps)
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <>
       <div className="relative flex-1 border-x border-muted">
         <div className="absolute h-full w-full">
           <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
@@ -37,6 +37,6 @@ export default async function DescriptionPage({ params }: DescriptionPageProps)
         </div>
       </div>
       <ProblemDescriptionFooter title={problem.title} />
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/problems/[id]/@Details/layout.tsx b/src/app/(app)/problems/[id]/@Details/layout.tsx
index 5cf90c9..1357609 100644
--- a/src/app/(app)/problems/[id]/@Details/layout.tsx
+++ b/src/app/(app)/problems/[id]/@Details/layout.tsx
@@ -1,8 +1,16 @@
-import { getUserLocale } from "@/i18n/locale";
-import DetailsPage from "@/app/(app)/problems/[id]/@Details/page";
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
 
-export default async function DetailsLayout() {
-  const locale = await getUserLocale();
-
-  return <DetailsPage locale={locale} />;
+interface DetailsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function DetailsLayout({ children }: DetailsLayoutProps) {
+  return (
+    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+    </div>
+  );
 }
diff --git a/src/app/(app)/problems/[id]/@Details/page.tsx b/src/app/(app)/problems/[id]/@Details/page.tsx
index 07127f7..5ef94e6 100644
--- a/src/app/(app)/problems/[id]/@Details/page.tsx
+++ b/src/app/(app)/problems/[id]/@Details/page.tsx
@@ -78,7 +78,7 @@ export default function DetailsPage({ locale }: DetailsPageProps) {
   };
 
   return (
-    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background">
+    <>
       <div className="h-8 flex flex-none items-center px-2 py-1 border-b">
         <Button
           onClick={handleClick}
@@ -206,6 +206,6 @@ export default function DetailsPage({ locale }: DetailsPageProps) {
           </ScrollArea>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/problems/[id]/@Solutions/layout.tsx b/src/app/(app)/problems/[id]/@Solutions/layout.tsx
new file mode 100644
index 0000000..5b127b3
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Solutions/layout.tsx
@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+
+interface SolutionsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function SolutionsLayout({ children }: SolutionsLayoutProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Solutions/page.tsx b/src/app/(app)/problems/[id]/@Solutions/page.tsx
index bd697d9..edf02b6 100644
--- a/src/app/(app)/problems/[id]/@Solutions/page.tsx
+++ b/src/app/(app)/problems/[id]/@Solutions/page.tsx
@@ -28,7 +28,7 @@ export default async function SolutionsPage({ params }: SolutionsPageProps) {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <>
       <div className="relative flex-1 border-x border-muted">
         <div className="absolute h-full w-full">
           <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
@@ -38,6 +38,6 @@ export default async function SolutionsPage({ params }: SolutionsPageProps) {
         </div>
       </div>
       <ProblemSolutionFooter title={problem.title} />
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/problems/[id]/@Submissions/layout.tsx b/src/app/(app)/problems/[id]/@Submissions/layout.tsx
new file mode 100644
index 0000000..3e78c2d
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Submissions/layout.tsx
@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+
+interface SubmissionsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function SubmissionsLayout({ children }: SubmissionsLayoutProps) {
+  return (
+    <div className="flex flex-col h-full px-3 border border-t-0 border-muted rounded-b-3xl bg-background">
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Submissions/page.tsx b/src/app/(app)/problems/[id]/@Submissions/page.tsx
index 506d071..c949d4b 100644
--- a/src/app/(app)/problems/[id]/@Submissions/page.tsx
+++ b/src/app/(app)/problems/[id]/@Submissions/page.tsx
@@ -41,11 +41,11 @@ export default async function SubmissionsPage({ params }: SubmissionsPageProps)
   const locale = await getUserLocale();
 
   return (
-    <div className="px-3 flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+    <>
       <ScrollArea className="h-full">
         <SubmissionsTable locale={locale} submissions={problem.submissions} />
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/problems/[id]/@Testcase/layout.tsx b/src/app/(app)/problems/[id]/@Testcase/layout.tsx
new file mode 100644
index 0000000..ac7397e
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@Testcase/layout.tsx
@@ -0,0 +1,16 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+
+interface TestcaseLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function TestcaseLayout({ children }: TestcaseLayoutProps) {
+  return (
+    <div className="relative h-full border border-t-0 border-muted rounded-b-3xl bg-background">
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(app)/problems/[id]/@Testcase/page.tsx b/src/app/(app)/problems/[id]/@Testcase/page.tsx
index 4be2bf0..cfce147 100644
--- a/src/app/(app)/problems/[id]/@Testcase/page.tsx
+++ b/src/app/(app)/problems/[id]/@Testcase/page.tsx
@@ -30,12 +30,10 @@ export default async function TestcasePage({ params }: TestcasePageProps) {
   }
 
   return (
-    <div className="relative h-full border border-t-0 border-muted rounded-b-3xl bg-background">
-      <div className="absolute h-full w-full">
-        <ScrollArea className="h-full">
-          <TestcaseCard testcases={problem.testcases} />
-        </ScrollArea>
-      </div>
+    <div className="absolute h-full w-full">
+      <ScrollArea className="h-full">
+        <TestcaseCard testcases={problem.testcases} />
+      </ScrollArea>
     </div>
   );
 }