grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
fix: prevent infinite scroll from looping by guarding on fetch state
The IntersectionObserver callback now checks !isFetching before calling
fetchNextPage, preventing repeated requests while a fetch is in progress.
Sentinel stays mounted; no unmount/remount tricks needed.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+6
-9
+2
-5
app/lib/actions/infinite-scroll.ts
+2
-5
app/lib/actions/infinite-scroll.ts
···
1
-
/** Svelte action: calls `onIntersect` when the element scrolls into view. */
1
+
/** Svelte action: calls `onIntersect` when the element scrolls into view.
2
+
* The callback should guard against re-entry (e.g. check `!isFetchingNextPage`). */
2
3
export function infiniteScroll(node: HTMLElement, onIntersect: () => void) {
3
4
const observer = new IntersectionObserver(
4
5
(entries) => {
5
6
if (entries[0]?.isIntersecting) {
6
7
onIntersect()
7
-
// Re-observe so it fires again if the sentinel stays in viewport
8
-
// (e.g. when a page returns too few items to scroll it out of view)
9
-
observer.unobserve(node)
10
-
requestAnimationFrame(() => observer.observe(node))
11
8
}
12
9
},
13
10
{ rootMargin: '200px' },
+1
-1
app/lib/components/molecules/StoryArchive.svelte
+1
-1
app/lib/components/molecules/StoryArchive.svelte
···
42
42
</div>
43
43
44
44
{#if archive.hasNextPage}
45
-
<div use:infiniteScroll={() => archive.fetchNextPage()} class="sentinel">
45
+
<div use:infiniteScroll={() => { if (!archive.isFetchingNextPage) archive.fetchNextPage() }} class="sentinel">
46
46
{#if archive.isFetchingNextPage}<Spinner />{/if}
47
47
</div>
48
48
{/if}
+1
-1
app/lib/components/organisms/FeedList.svelte
+1
-1
app/lib/components/organisms/FeedList.svelte
+1
-1
app/lib/components/organisms/GalleryGrid.svelte
+1
-1
app/lib/components/organisms/GalleryGrid.svelte
+1
-1
app/routes/notifications/+page.svelte
+1
-1
app/routes/notifications/+page.svelte