strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fine tune infinite scroll values

Browse Source
This commit is contained in:
Sam Becker 2024-04-27 12:45:20 -05:00
parent 08451cff13
commit d2a0d2aaea
4 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/grid/page.tsx
View File

@ -1,6 +1,7 @@
import { getPhotosCached } from '@/photo/cache'; import { getPhotosCached } from '@/photo/cache';
import SiteGrid from '@/components/SiteGrid'; import SiteGrid from '@/components/SiteGrid';
import { import {
INFINITE_SCROLL_INITIAL_GRID,
INFINITE_SCROLL_MULTIPLE_GRID, INFINITE_SCROLL_MULTIPLE_GRID,
generateOgImageMetaForPhotos, generateOgImageMetaForPhotos,
} from '@/photo'; } from '@/photo';
@ -27,7 +28,7 @@ export default async function GridPage() {
cameras, cameras,
simulations, simulations,
] = await Promise.all([ ] = await Promise.all([
getPhotosCached({ limit: INFINITE_SCROLL_MULTIPLE_GRID }), getPhotosCached({ limit: INFINITE_SCROLL_INITIAL_GRID }),
...getPhotoSidebarDataCached(), ...getPhotoSidebarDataCached(),
]); ]);
@ -36,10 +37,10 @@ export default async function GridPage() {
? <SiteGrid ? <SiteGrid
contentMain={<div className="space-y-0.5 sm:space-y-1"> contentMain={<div className="space-y-0.5 sm:space-y-1">
<PhotoGrid {...{ photos }} /> <PhotoGrid {...{ photos }} />
{photos.length >= INFINITE_SCROLL_MULTIPLE_GRID && {photosCount >= photos.length &&
<InfinitePhotoScroll <InfinitePhotoScroll
type='grid' type='grid'
initialOffset={INFINITE_SCROLL_MULTIPLE_GRID} initialOffset={INFINITE_SCROLL_INITIAL_GRID}
itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID} itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}
/>} />}
</div>} </div>}

26
src/app/page.tsx
View File

@ -1,5 +1,6 @@
import { getPhotosCachedCached } from '@/photo/cache'; import { getPhotosCachedCached, getPhotosCountCached } from '@/photo/cache';
import { import {
INFINITE_SCROLL_INITIAL_HOME,
INFINITE_SCROLL_MULTIPLE_HOME, INFINITE_SCROLL_MULTIPLE_HOME,
generateOgImageMetaForPhotos, generateOgImageMetaForPhotos,
} from '@/photo'; } from '@/photo';
@ -12,29 +13,36 @@ import PhotosLarge from '@/photo/PhotosLarge';
export const dynamic = 'force-static'; export const dynamic = 'force-static';
export async function generateMetadata(): Promise<Metadata> { export async function generateMetadata(): Promise<Metadata> {
// Make homepage queries resilient to error on first time setup
const photos = await getPhotosCachedCached({ const photos = await getPhotosCachedCached({
limit: MAX_PHOTOS_TO_SHOW_OG, limit: MAX_PHOTOS_TO_SHOW_OG,
}) })
// Make homepage queries resilient to error on first time setup
.catch(() => []); .catch(() => []);
return generateOgImageMetaForPhotos(photos); return generateOgImageMetaForPhotos(photos);
} }
export default async function HomePage() { export default async function HomePage() {
const photos = await getPhotosCachedCached({ // Make homepage queries resilient to error on first time setup
limit: INFINITE_SCROLL_MULTIPLE_HOME, const [
}) photos,
// Make homepage queries resilient to error on first time setup photosCount,
.catch(() => []); ] = await Promise.all([
getPhotosCachedCached({
limit: INFINITE_SCROLL_INITIAL_HOME,
})
.catch(() => []),
getPhotosCountCached()
.catch(() => 0),
]);
return ( return (
photos.length > 0 photos.length > 0
? <div className="space-y-1"> ? <div className="space-y-1">
<PhotosLarge {...{ photos }} /> <PhotosLarge {...{ photos }} />
{photos.length >= INFINITE_SCROLL_MULTIPLE_HOME && {photosCount >= photos.length &&
<InfinitePhotoScroll <InfinitePhotoScroll
type="full-frame" type="full-frame"
initialOffset={INFINITE_SCROLL_MULTIPLE_HOME} initialOffset={INFINITE_SCROLL_INITIAL_HOME}
itemsPerPage={INFINITE_SCROLL_MULTIPLE_HOME} itemsPerPage={INFINITE_SCROLL_MULTIPLE_HOME}
/>} />}
</div> </div>

10
src/photo/InfinitePhotoScroll.tsx
View File

@ -22,12 +22,12 @@ export type RevalidatePhoto = (
export default function InfinitePhotoScroll({ export default function InfinitePhotoScroll({
type = 'full-frame', type = 'full-frame',
initialOffset = 0, initialOffset,
itemsPerPage = 12, itemsPerPage,
}: { }: {
type?: 'full-frame' | 'grid' type: 'full-frame' | 'grid'
initialOffset?: number initialOffset: number
itemsPerPage?: number itemsPerPage: number
debug?: boolean debug?: boolean
}) { }) {
const { swrTimestamp, isUserSignedIn } = useAppState(); const { swrTimestamp, isUserSignedIn } = useAppState();

12
src/photo/index.ts
View File

@ -15,11 +15,19 @@ import type { Metadata } from 'next';
export const GENERATE_STATIC_PARAMS_LIMIT = 1000; export const GENERATE_STATIC_PARAMS_LIMIT = 1000;
export const INFINITE_SCROLL_MULTIPLE_HOME = // ROOT PAGE
export const INFINITE_SCROLL_INITIAL_HOME =
process.env.NODE_ENV === 'development' ? 2 : 12; process.env.NODE_ENV === 'development' ? 2 : 12;
export const INFINITE_SCROLL_MULTIPLE_GRID = HIGH_DENSITY_GRID export const INFINITE_SCROLL_MULTIPLE_HOME =
process.env.NODE_ENV === 'development' ? 2 : 24;
// GRID PAGE
export const INFINITE_SCROLL_INITIAL_GRID = HIGH_DENSITY_GRID
? process.env.NODE_ENV === 'development' ? 4 : 20 ? process.env.NODE_ENV === 'development' ? 4 : 20
: process.env.NODE_ENV === 'development' ? 4 : 24; : process.env.NODE_ENV === 'development' ? 4 : 24;
export const INFINITE_SCROLL_MULTIPLE_GRID = HIGH_DENSITY_GRID
? process.env.NODE_ENV === 'development' ? 4 : 40
: process.env.NODE_ENV === 'development' ? 4 : 48;
export const GRID_THUMBNAILS_TO_SHOW_MAX = 12; export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;