Remove useEffect from MoreComponents

src/app/page.tsx

@@ -1,5 +1,5 @@
 import { getPhotosCached, getPhotosCountCached } from '@/cache';
-import { generateOgImageMetaForPhotos } from '@/photo';
+import { LARGE_PHOTOS_TO_SHOW, generateOgImageMetaForPhotos } from '@/photo';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { Metadata } from 'next';
 import { MAX_PHOTOS_TO_SHOW_OG } from '@/photo/image-response';
@@ -19,7 +19,7 @@ export default async function HomePage() {
     count,
   ] = await Promise.all([
     // Make homepage queries resilient to error on first time setup
-    getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_OG }).catch(() => []),
+    getPhotosCached({ limit: LARGE_PHOTOS_TO_SHOW }).catch(() => []),
     getPhotosCountCached().catch(() => 0),
   ]);
 
@@ -29,13 +29,13 @@ export default async function HomePage() {
         <PhotosLarge photos={photos} />
         <MoreComponents
           label="More photos"
-          itemsPerRequest={MAX_PHOTOS_TO_SHOW_OG}
+          itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
           itemsTotalCount={count}
           componentLoader={async (limit: number) => {
             'use server';
             return <PhotosLarge
               photos={(await getPhotosCached({ limit }))
-                .slice(MAX_PHOTOS_TO_SHOW_OG)}
+                .slice(LARGE_PHOTOS_TO_SHOW)}
             />;
           }}
         />

src/components/MoreComponents.tsx

@@ -25,18 +25,14 @@ export default function MoreComponents({
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const advance = useCallback(() => startTransition(() => {
-    setOffset(o => o + 1);
-  }), []);
-
-  useEffect(() => {
     const getMoreComponentsAsync = async () => {
-      console.log('getMoreComponentsAsync', itemsPerRequest * offset);
       return componentLoader(itemsPerRequest * offset);
     };
     getMoreComponentsAsync().then((component) => {
       setComponents([component]);
+      setOffset(o => o + 1);
     });
-  }, [componentLoader, itemsPerRequest, offset]);
+  }), [componentLoader, itemsPerRequest, offset]);
 
   useEffect(() => {
     // Only add observer if button is rendered

src/photo/index.ts

@@ -11,6 +11,7 @@ import {
 import camelcaseKeys from 'camelcase-keys';
 import type { Metadata } from 'next';
 
+export const LARGE_PHOTOS_TO_SHOW = 12;
 export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;
 
 export const ACCEPTED_PHOTO_FILE_TYPES = [