fix: add suspense to server components

systemphil · Jul 21, 2024 · 36a542f · 36a542f
1 parent e190253
commit 36a542f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/app/(user)/billing/page.tsx b/src/app/(user)/billing/page.tsx
@@ -6,6 +6,7 @@ import { dbGetUserPurchasedCourses } from "@/server/controllers/dbController";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { Suspense } from "react";
 
 export const dynamic = "force-dynamic";
 
@@ -20,7 +21,9 @@ export default async function Billing() {
 
     return (
         <PageWrapper>
-            <Maintenance area="user" />
+            <Suspense>
+                <Maintenance area="user" />
+            </Suspense>
             <div className="py-10">
                 <h1 className="text-xl font-bold py-6 text-center">Billing</h1>
                 {purchasedCourses && purchasedCourses.length > 0 ? (

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,14 +6,17 @@ import InfoCard from "@/components/InfoCard";
 import { PolyRhythmicSpiral } from "@/components/animations/PolyRhythmicSpiral";
 import Link from "next/link";
 import { Maintenance } from "@/components/Maintenance";
+import { Suspense } from "react";
 
 export default async function Home() {
     return (
         <>
             <Hero />
             <PageWrapper>
                 <OpeningDescription />
-                <Maintenance area="global" />
+                <Suspense>
+                    <Maintenance area="global" />
+                </Suspense>
                 <MainInfoCard />
                 <InfoCards />
                 <Community />