From 2f037f8a78cba4ca08e26f4d69c0c3dfe908ae9e Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 13 Mar 2025 11:24:24 +0800
Subject: [PATCH] feat(layout): add Suspense with fallback loading for
 problemset layout

---
 src/app/(app)/problemset/layout.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/(app)/problemset/layout.tsx b/src/app/(app)/problemset/layout.tsx
index f7cc993..cc8fd83 100644
--- a/src/app/(app)/problemset/layout.tsx
+++ b/src/app/(app)/problemset/layout.tsx
@@ -1,4 +1,6 @@
+import { Suspense } from "react";
 import { Banner } from "@/components/banner";
+import { Loading } from "@/components/loading";
 import { AvatarButton } from "@/components/avatar-button";
 
 interface ProblemsetLayoutProps {
@@ -7,13 +9,15 @@ interface ProblemsetLayoutProps {
 
 export default function ProblemsetLayout({ children }: ProblemsetLayoutProps) {
   return (
-    <div className="relative flex flex-col">
+    <div className="relative h-screen flex flex-col">
       <Banner />
       <div className="absolute top-2 right-4">
         <AvatarButton />
       </div>
-      <main className="container mx-auto p-4">
-        {children}
+      <main className="h-full container mx-auto p-4">
+        <Suspense fallback={<Loading />}>
+          {children}
+        </Suspense>
       </main>
     </div>
   );