From 11ff96c72904502f94bba8e9b7d08f0c721917e5 Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Tue, 29 Aug 2023 20:58:44 +0200
Subject: [PATCH] Add suspense to pages

---
 app/(site)/[locale]/[...slug]/page.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/(site)/[locale]/[...slug]/page.tsx b/app/(site)/[locale]/[...slug]/page.tsx
index 8cdc78fdb..27fea6a95 100644
--- a/app/(site)/[locale]/[...slug]/page.tsx
+++ b/app/(site)/[locale]/[...slug]/page.tsx
@@ -13,6 +13,7 @@ import type { Metadata } from 'next';
 import { LiveQuery } from 'next-sanity/preview/live-query';
 import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
 
 export async function generateMetadata({
   params
@@ -107,10 +108,26 @@ export default async function Page({ params }: PageParams) {
       as={PagePreview}
     >
       <>
-        {docType === 'page' && <SinglePage data={data} />}
-        {docType === 'product' && <ProductPage data={data} />}
-        {docType === 'category' && <CategoryPage data={data} />}
-        {docType === 'search' && <SearchPage data={data} />}
+        {docType === 'page' && (
+          <Suspense fallback={<div>Loading page...</div>}>
+            <SinglePage data={data} />
+          </Suspense>
+        )}
+        {docType === 'product' && (
+          <Suspense fallback={<div>Loading product...</div>}>
+            <ProductPage data={data} />
+          </Suspense>
+        )}
+        {docType === 'category' && (
+          <Suspense fallback={<div>Loading category...</div>}>
+            <CategoryPage data={data} />
+          </Suspense>
+        )}
+        {docType === 'search' && (
+          <Suspense fallback={<div>Loading search...</div>}>
+            <SearchPage data={data} />
+          </Suspense>
+        )}
       </>
     </LiveQuery>
   );