Create MoreComponents container

src/app/page.tsx

@@ -3,9 +3,9 @@ import { LARGE_PHOTOS_TO_SHOW, generateOgImageMetaForPhotos } from '@/photo';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { Metadata } from 'next/types';
 import { MAX_PHOTOS_TO_SHOW_OG } from '@/photo/image-response';
-import MoreComponents from '@/components/MoreComponents';
 import PhotosLarge from '@/photo/PhotosLarge';
 import { Suspense } from 'react';
+import { MorePhotosLarge } from '@/photo/MorePhotosLarge';
 
 export const revalidate = 3600;
 
@@ -31,24 +31,10 @@ export default async function HomePage() {
       ? <div className="space-y-1">
         <PhotosLarge photos={photos} />
         <Suspense>
-          <MoreComponents
-            label="More photos"
+          <MorePhotosLarge
             initialOffset={LARGE_PHOTOS_TO_SHOW}
             itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
-            getNextComponent={async (offset, limit) => {
-              'use server';
-              const photos = await getPhotosCached({ limit: offset + limit })
-                .catch(() => undefined);
-              if (!photos) {
-                return { didError: true };
-              } else {
-                const nextPhotos = photos.slice(offset);
-                return {
-                  nextComponent: <PhotosLarge photos={nextPhotos} />,
-                  isFinished: offset + limit >= count,
-                };
-              }
-            }}
+            totalPhotosCount={count}
           />
         </Suspense>
       </div>

src/components/MoreComponents.tsx

@@ -21,7 +21,7 @@ export default function MoreComponents({
   getNextComponent: (offset: number, limit: number) => Promise<{
     nextComponent?: JSX.Element,
     isFinished?: boolean,
-    didError?: boolean,
+    didFail?: boolean,
   }>
   label?: string
   triggerOnView?: boolean
@@ -63,8 +63,8 @@ export default function MoreComponents({
           initialOffset + (indexToLoad - 1) * itemsPerRequest,
           itemsPerRequest,
         )
-          .then(({ nextComponent, isFinished, didError }) => {
-            if (!didError && nextComponent) {
+          .then(({ nextComponent, isFinished, didFail }) => {
+            if (!didFail && nextComponent) {
               setComponents(current => {
                 const updatedComponents = [...current];
                 updatedComponents[indexToLoad] = nextComponent;

src/photo/MorePhotosLarge.tsx

@@ -0,0 +1,35 @@
+import MoreComponents from '@/components/MoreComponents';
+import PhotosLarge from './PhotosLarge';
+import { getPhotosCached } from '@/cache';
+
+export function MorePhotosLarge({
+  initialOffset,
+  itemsPerRequest,
+  totalPhotosCount,
+}: {
+  initialOffset: number
+  itemsPerRequest: number
+  totalPhotosCount: number
+}) {
+  return (
+    <MoreComponents
+      label="More photos"
+      initialOffset={initialOffset}
+      itemsPerRequest={itemsPerRequest}
+      getNextComponent={async (offset, limit) => {
+        'use server';
+        const photos = await getPhotosCached({ limit: offset + limit })
+          .catch(() => undefined);
+        if (!photos) {
+          return { didFail: true };
+        } else {
+          const nextPhotos = photos.slice(offset);
+          return {
+            nextComponent: <PhotosLarge photos={nextPhotos} />,
+            isFinished: offset + limit >= totalPhotosCount,
+          };
+        }
+      }}
+    />
+  );
+}