feat(layout): add layout with suspense boundary for problem

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>
+  );
+}

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>
+    </>
   );
 }

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>
+  );
+}

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>
-      <WorkspaceEditorFooter />
-    </div>
   );
 }

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>
+  );
+}

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>
+    </>
   );
 }

src/app/(app)/problems/[id]/@Details/layout.tsx

@@ -1,8 +1,16 @@
-import { getUserLocale } from "@/i18n/locale";
+import { Suspense } from "react";
-import DetailsPage from "@/app/(app)/problems/[id]/@Details/page";
+import { Loading } from "@/components/loading";
 
-export default async function DetailsLayout() {
+interface DetailsLayoutProps {
-  const locale = await getUserLocale();
+  children: React.ReactNode;
-
+}
-  return <DetailsPage locale={locale} />;
+
+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>
+  );
 }

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>
+    </>
   );
 }

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>
+  );
+}

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>
+    </>
   );
 }

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>
+  );
+}

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>
+    </>
   );
 }

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>
+  );
+}

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>
   );
 }