refactor(problems): use Suspense for lazy loading and adjust layout structure

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

@@ -1,30 +1,18 @@
-import prisma from "@/lib/prisma";
-import ProblemDescriptionFooter from "@/features/playground/problem/description/footer";
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
 
 interface ProblemDescriptionLayoutProps {
-  params: Promise<{ id: string }>;
   children: React.ReactNode;
 }
 
-export default async function ProblemDescriptionLayout({
-  params,
+export default function ProblemDescriptionLayout({
   children,
 }: ProblemDescriptionLayoutProps) {
-  const { id } = await params;
-
-  const problem = await prisma.problem.findUnique({
-    where: { id: parseInt(id) },
-    select: {
-      title: true,
-    }
-  });
-
-  const title = problem?.title ?? "";
-
   return (
     <div className="h-full flex flex-col">
-      <div className="flex-1">{children}</div>
-      <ProblemDescriptionFooter title={title} />
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
     </div>
   );
 }

src/app/(app)/problems/[id]/@problem/@description/page.tsx

@@ -2,6 +2,7 @@ import prisma from "@/lib/prisma";
 import { notFound } from "next/navigation";
 import { MdxRenderer } from "@/components/content/mdx-renderer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import ProblemDescriptionFooter from "@/features/playground/problem/description/footer";
 
 interface ProblemDescriptionPageProps {
   params: Promise<{ id: string }>
@@ -15,6 +16,7 @@ export default async function ProblemDescriptionPage({
   const problem = await prisma.problem.findUnique({
     where: { id: parseInt(id) },
     select: {
+      title: true,
       description: true,
     }
   });
@@ -24,9 +26,14 @@ export default async function ProblemDescriptionPage({
   }
 
   return (
-    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-      <MdxRenderer source={problem.description} />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
+    <>
+      <div className="flex-1">
+        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
+          <MdxRenderer source={problem.description} />
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </div>
+      <ProblemDescriptionFooter title={problem.title} />
+    </>
   );
 }

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

@@ -1,30 +1,18 @@
-import prisma from "@/lib/prisma";
-import ProblemSolutionFooter from "@/features/playground/problem/solution/footer";
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
 
 interface ProblemSolutionLayoutProps {
-  params: Promise<{ id: string }>;
   children: React.ReactNode;
 }
 
-export default async function ProblemSolutionLayout({
-  params,
+export default function ProblemSolutionLayout({
   children,
 }: ProblemSolutionLayoutProps) {
-  const { id } = await params;
-
-  const problem = await prisma.problem.findUnique({
-    where: { id: parseInt(id) },
-    select: {
-      title: true,
-    },
-  });
-
-  const title = problem?.title ?? "";
-
   return (
     <div className="h-full flex flex-col">
-      <div className="flex-1">{children}</div>
-      <ProblemSolutionFooter title={title} />
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
     </div>
   );
 }

src/app/(app)/problems/[id]/@problem/@solution/page.tsx

@@ -2,6 +2,7 @@ import prisma from "@/lib/prisma";
 import { notFound } from "next/navigation";
 import { MdxRenderer } from "@/components/content/mdx-renderer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import ProblemSolutionFooter from "@/features/playground/problem/solution/footer";
 
 interface ProblemSolutionPageProps {
   params: Promise<{ id: string }>;
@@ -15,6 +16,7 @@ export default async function ProblemSolutionPage({
   const problem = await prisma.problem.findUnique({
     where: { id: parseInt(id) },
     select: {
+      title: true,
       solution: true,
     },
   });
@@ -24,9 +26,14 @@ export default async function ProblemSolutionPage({
   }
 
   return (
-    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-      <MdxRenderer source={problem.solution} />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
+    <>
+      <div className="flex-1">
+        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
+          <MdxRenderer source={problem.solution} />
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </div>
+      <ProblemSolutionFooter title={problem.title} />
+    </>
   );
 }

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

@@ -1,3 +1,6 @@
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
+
 interface TerminalTestcaseLayoutProps {
   children: React.ReactNode;
 }
@@ -7,7 +10,11 @@ export default function TerminalTestcaseLayout({
 }: TerminalTestcaseLayoutProps) {
   return (
     <div className="h-full flex flex-col">
-      <div className="flex-1">{children}</div>
+      <div className="flex-1">
+        <Suspense fallback={<Loading />}>
+          {children}
+        </Suspense>
+      </div>
     </div>
   );
 }

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

@@ -1,37 +1,18 @@
-import prisma from "@/lib/prisma";
-import WorkspaceEditorHeader from "@/features/playground/workspace/editor/header";
-import WorkspaceEditorFooter from "@/features/playground/workspace/editor/footer";
+import { Suspense } from "react";
+import { Loading } from "@/components/loading";
 
 interface WorkspaceEditorLayoutProps {
-  params: Promise<{ id: string }>;
   children: React.ReactNode;
 }
 
-export default async function WorkspaceEditorLayout({
-  params,
+export default function WorkspaceEditorLayout({
   children,
 }: WorkspaceEditorLayoutProps) {
-  const { id } = await params;
-
-  const problem = await prisma.problem.findUnique({
-    where: { id: parseInt(id) },
-    select: {
-      templates: {
-        select: {
-          language: true,
-          template: true,
-        }
-      }
-    }
-  });
-
-  const templates = problem?.templates ?? [];
-
   return (
     <div className="h-full flex flex-col">
-      <WorkspaceEditorHeader templates={templates} />
-      <div className="flex-1">{children}</div>
-      <WorkspaceEditorFooter />
+      <Suspense fallback={<Loading />}>
+        {children}
+      </Suspense>
     </div>
   );
 }

src/app/(app)/problems/[id]/@workspace/@editor/page.tsx

@@ -1,5 +1,7 @@
 import prisma from "@/lib/prisma";
 import CodeEditor from "@/components/code-editor";
+import WorkspaceEditorHeader from "@/features/playground/workspace/editor/header";
+import WorkspaceEditorFooter from "@/features/playground/workspace/editor/footer";
 
 interface WorkspaceEditorProps {
   params: Promise<{ id: string }>
@@ -24,5 +26,13 @@ export default async function WorkspaceEditorPage({
 
   const templates = problem?.templates ?? [];
 
-  return <CodeEditor problemId={id} templates={templates} />;
+  return (
+    <>
+      <WorkspaceEditorHeader templates={templates} />
+      <div className="flex-1">
+        <CodeEditor problemId={id} templates={templates} />
+      </div>
+      <WorkspaceEditorFooter />
+    </>
+  )
 }