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

Test next version of infinite scroll

Browse Source
This commit is contained in:
Sam Becker 2024-01-15 13:25:50 -06:00
parent c92ce68dae
commit 5f99d50118
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/page.tsx
View File

@ -37,10 +37,11 @@ export default async function HomePage() {
itemsPerRequest={LARGE_PHOTOS_TO_SHOW}
getNextComponent={async (offset, limit) => {
'use server';
// console.log('Getting next component', { offset, limit });
const photos = await getPhotosCached({ limit: offset + limit });
const nextPhotos = photos.slice(-limit);
console.log(`Sending ${nextPhotos.length} photos`);
console.log(photos.length);
const nextPhotos = photos.slice(offset);
console.log('Getting next component', { offset, limit });
console.log(`Sending: ${nextPhotos.map(p => p.id).join(', ')}`);
return {
nextComponent: <PhotosLarge photos={nextPhotos} />,
isFinished: offset + limit >= count,

20
src/components/MoreComponents.tsx
View File

@ -35,16 +35,21 @@ export default function MoreComponents({
if (
!isLoading &&
// (lastIndexToLoad === undefined || indexToLoad <= lastIndexToLoad) &&
// indexToLoad >= 1 &&
indexToLoad > indexToView &&
indexToLoad > indexLoaded
) {
setIsLoading(true);
getNextComponent(
initialOffset + indexToLoad * itemsPerRequest,
initialOffset + (indexToLoad - 1) * itemsPerRequest,
itemsPerRequest,
)
.then(({ nextComponent, isFinished }) => {
setComponents(current => [...current, nextComponent]);
setComponents(current => {
const updatedComponents = [...current];
updatedComponents[indexToLoad] = nextComponent;
return updatedComponents;
});
setIndexLoaded(indexToLoad);
if (isFinished) {
setLastIndexToLoad(indexToLoad);
@ -89,10 +94,17 @@ export default function MoreComponents({
}
}, [triggerOnView, advance]);
console.log({ indexToLoad, indexToView, indexLoaded, lastIndexToLoad });
// console.log({
// indexToLoad,
// indexToView,
// // indexLoaded,
// lastIndexToLoad,
// componentsLength: components.length,
// componentsToView: components.slice(0, indexToView + 1).length,
// });
return <>
{components.slice(0, indexToView)}
{components.slice(0, indexToView + 1)}
{indexToView < indexLoaded &&
<SiteGrid
contentMain={