From 8213a8f3dc73f816a649e47c7dc412d32f390df6 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 13 Jan 2024 22:43:23 -0600
Subject: [PATCH] Move MoreComponents behind suspense boundary

---
 src/app/page.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7e4a9654..865fb675 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,7 @@ import { Metadata } from 'next';
 import { MAX_PHOTOS_TO_SHOW_OG } from '@/photo/image-response';
 import MoreComponents from '@/components/MoreComponents';
 import PhotosLarge from '@/photo/PhotosLarge';
+import { Suspense } from 'react';
 
 export async function generateMetadata(): Promise<Metadata> {
   // Make homepage queries resilient to error on first time setup
@@ -27,18 +28,20 @@ export default async function HomePage() {
     photos.length > 0
       ? <div className="space-y-1">
         <PhotosLarge photos={photos} />
-        <MoreComponents
-          label="More photos"
-          itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
-          itemsTotalCount={count}
-          componentLoader={async (limit: number) => {
-            'use server';
-            return <PhotosLarge
-              photos={(await getPhotosCached({ limit }))
-                .slice(LARGE_PHOTOS_TO_SHOW)}
-            />;
-          }}
-        />
+        <Suspense>
+          <MoreComponents
+            label="More photos"
+            itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
+            itemsTotalCount={count}
+            componentLoader={async (limit: number) => {
+              'use server';
+              return <PhotosLarge
+                photos={(await getPhotosCached({ limit }))
+                  .slice(LARGE_PHOTOS_TO_SHOW)}
+              />;
+            }}
+          />
+        </Suspense>
       </div>
       : <PhotosEmptyState />
   );