From 9810514c7639cb25e10e0eade10765f1c9a6d01a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Feb 2024 10:50:08 -0600
Subject: [PATCH] Fix infinite scroll grid layout

---
 src/app/grid/page.tsx             |  8 +++----
 src/app/page.tsx                  |  8 +++----
 src/components/MoreComponents.tsx | 39 +++++++++++++++++--------------
 src/photo/MorePhotosRoot.tsx      |  1 +
 src/photo/index.ts                |  9 +++----
 5 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/app/grid/page.tsx b/src/app/grid/page.tsx
index e8938f4c..70263492 100644
--- a/src/app/grid/page.tsx
+++ b/src/app/grid/page.tsx
@@ -1,7 +1,7 @@
 import { getPhotosCached } from '@/photo/cache';
 import SiteGrid from '@/components/SiteGrid';
 import {
-  PHOTO_LOAD_MULTIPLE_GRID,
+  INFINITE_SCROLL_MULTIPLE_GRID,
   generateOgImageMetaForPhotos,
 } from '@/photo';
 import PhotoGrid from '@/photo/PhotoGrid';
@@ -28,7 +28,7 @@ export default async function GridPage() {
     cameras,
     simulations,
   ] = await Promise.all([
-    getPhotosCached({ limit: PHOTO_LOAD_MULTIPLE_GRID }),
+    getPhotosCached({ limit: INFINITE_SCROLL_MULTIPLE_GRID }),
     ...getPhotoSidebarDataCached(),
   ]);
 
@@ -39,8 +39,8 @@ export default async function GridPage() {
           <PhotoGrid {...{ photos }} />
           <Suspense>
             <MorePhotosGrid
-              initialOffset={PHOTO_LOAD_MULTIPLE_GRID}
-              itemsPerRequest={PHOTO_LOAD_MULTIPLE_GRID}
+              initialOffset={INFINITE_SCROLL_MULTIPLE_GRID}
+              itemsPerRequest={INFINITE_SCROLL_MULTIPLE_GRID}
               totalPhotosCount={photosCount}
             />
           </Suspense>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index acaf7bff..13dd7d07 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 import { getPhotosCached, getPhotosCountCached } from '@/photo/cache';
 import {
-  PHOTO_LOAD_MULTIPLE_ROOT,
+  INFINITE_SCROLL_MULTIPLE_ROOT,
   generateOgImageMetaForPhotos,
 } from '@/photo';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
@@ -25,7 +25,7 @@ export default async function HomePage() {
     count,
   ] = await Promise.all([
     // Make homepage queries resilient to error on first time setup
-    getPhotosCached({ limit: PHOTO_LOAD_MULTIPLE_ROOT }).catch(() => []),
+    getPhotosCached({ limit: INFINITE_SCROLL_MULTIPLE_ROOT }).catch(() => []),
     getPhotosCountCached().catch(() => 0),
   ]);
 
@@ -35,8 +35,8 @@ export default async function HomePage() {
         <PhotosLarge photos={photos} />
         <Suspense>
           <MorePhotosRoot
-            initialOffset={PHOTO_LOAD_MULTIPLE_ROOT}
-            itemsPerRequest={PHOTO_LOAD_MULTIPLE_ROOT}
+            initialOffset={INFINITE_SCROLL_MULTIPLE_ROOT}
+            itemsPerRequest={INFINITE_SCROLL_MULTIPLE_ROOT}
             totalPhotosCount={count}
           />
         </Suspense>
diff --git a/src/components/MoreComponents.tsx b/src/components/MoreComponents.tsx
index 14fdaeef..2559a05b 100644
--- a/src/components/MoreComponents.tsx
+++ b/src/components/MoreComponents.tsx
@@ -21,6 +21,7 @@ export default function MoreComponents({
   label = 'Load more',
   triggerOnView = true,
   prefetch = true,
+  wrapMoreButtonInSiteGrid,
 }: {
   stateKey: MoreComponentsKey
   initialOffset: number
@@ -33,6 +34,7 @@ export default function MoreComponents({
   label?: string
   triggerOnView?: boolean
   prefetch?: boolean
+  wrapMoreButtonInSiteGrid?: boolean
 }) {
   const { state, setStateForKey } = useMoreComponentsState();
 
@@ -162,23 +164,26 @@ export default function MoreComponents({
     }
   }, [triggerOnView, advance]);
 
+  const renderMoreButton = () => 
+    <button
+      ref={buttonRef}
+      className="block w-full subtle"
+      onClick={!triggerOnView ? advance : undefined}
+      disabled={triggerOnView || isLoading}
+    >
+      {isLoading || triggerOnView
+        ? <span className="relative inline-block translate-y-[3px]">
+          <Spinner size={16} />
+        </span>
+        : label}
+    </button>;
+
   return <>
-    {components.slice(0, indexToView + 1)}
-    {showMoreButton &&
-      <SiteGrid
-        contentMain={
-          <button
-            ref={buttonRef}
-            className="block w-full mt-4 subtle"
-            onClick={!triggerOnView ? advance : undefined}
-            disabled={triggerOnView || isLoading}
-          >
-            {isLoading || triggerOnView
-              ? <span className="relative inline-block translate-y-[3px]">
-                <Spinner size={16} />
-              </span>
-              : label}
-          </button>}
-      />}
+    <div className="space-y-4">
+      <div>{components.slice(0, indexToView + 1)}</div>
+      {(showMoreButton || true) && wrapMoreButtonInSiteGrid
+        ? <SiteGrid contentMain={renderMoreButton()} />
+        : renderMoreButton()}
+    </div>
   </>;
 }
diff --git a/src/photo/MorePhotosRoot.tsx b/src/photo/MorePhotosRoot.tsx
index 2c4fe642..fe1b471b 100644
--- a/src/photo/MorePhotosRoot.tsx
+++ b/src/photo/MorePhotosRoot.tsx
@@ -37,6 +37,7 @@ export function MorePhotosRoot({
           };
         }
       }}
+      wrapMoreButtonInSiteGrid
     />
   );
 }
diff --git a/src/photo/index.ts b/src/photo/index.ts
index 1a06ec6c..8717aa01 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -1,5 +1,5 @@
 import { FilmSimulation } from '@/simulation';
-import { SHOW_EXIF_DATA } from '@/site/config';
+import { HIGH_DENSITY_GRID, SHOW_EXIF_DATA } from '@/site/config';
 import { ABSOLUTE_PATH_FOR_HOME_IMAGE } from '@/site/paths';
 import { formatDateFromPostgresString } from '@/utility/date';
 import {
@@ -14,10 +14,11 @@ import type { Metadata } from 'next';
 
 export const GENERATE_STATIC_PARAMS_LIMIT = 1000;
 
-export const PHOTO_LOAD_MULTIPLE_ROOT =
+export const INFINITE_SCROLL_MULTIPLE_ROOT =
   process.env.NODE_ENV === 'development' ? 2 : 12;
-export const PHOTO_LOAD_MULTIPLE_GRID =
-  process.env.NODE_ENV === 'development' ? 4 : 36;
+export const INFINITE_SCROLL_MULTIPLE_GRID = HIGH_DENSITY_GRID
+  ? process.env.NODE_ENV === 'development' ? 5 : 20
+  : process.env.NODE_ENV === 'development' ? 4 : 24;
 
 export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;