Improve <InfiniteScroll> cleanup after navigating away (#2610)

* wip

* Update InfiniteScroll.svelte

* test

* Update server.js

* More fixes + prefetch test

Author: pascalbaljet

packages/core/src/infiniteScroll.ts

@@ -91,5 +91,10 @@ export default function useInfiniteScroll(options: UseInfiniteScrollOptions): Us
   return {
     dataManager,
     elementManager,
+    flush: () => {
+      dataManager.removeEventListener()
+      elementManager.flushAll()
+      queryStringManager.cancel()
+    },
   }
 }

packages/core/src/infiniteScroll/data.ts

@@ -35,6 +35,7 @@ export const useInfiniteScrollData = (options: {
   const { previousPage, nextPage, currentPage: lastLoadedPage } = getScrollPropFromCurrentPage()
 
   const state = {
+    component: currentPage.get().component,
     loading: false,
     previousPage,
     nextPage,
@@ -54,7 +55,12 @@ export const useInfiniteScrollData = (options: {
     state.requestCount = rememberedState.requestCount || 0
   }
 
-  const removeEventListener = router.on('success', () => {
+  const removeEventListener = router.on('success', (event) => {
+    if (state.component !== event.detail.page.component) {
+      // Only reset state if it's the same component
+      return
+    }
+
     const scrollProp = getScrollPropFromCurrentPage()
 
     if (scrollProp.reset) {

packages/core/src/infiniteScroll/elements.ts

@@ -57,9 +57,8 @@ export const useInfiniteScrollElementManager = (options: {
 
     // Track individual items entering/leaving viewport for URL synchronization
     // When items become visible, we update the URL to reflect the current page
-    itemsObserver = intersectionObservers.new(
-      (entry: IntersectionObserverEntry) => options.onItemIntersected(entry.target as HTMLElement),
-      { threshold: 0 },
+    itemsObserver = intersectionObservers.new((entry: IntersectionObserverEntry) =>
+      options.onItemIntersected(entry.target as HTMLElement),
     )
 
     // Set up trigger zones at start/end that load more content when intersected. The rootMargin
@@ -111,6 +110,7 @@ export const useInfiniteScrollElementManager = (options: {
   }
 
   const flushAll = () => {
+    disableTriggers()
     intersectionObservers.flushAll()
     itemsMutationObserver?.disconnect()
   }

packages/core/src/infiniteScroll/queryString.ts

@@ -13,15 +13,19 @@ export const useInfiniteScrollQueryString = (options: {
   getItemsElement: () => HTMLElement
   shouldPreserveUrl: () => boolean
 }) => {
+  let enabled = true
+
   // Debounced to avoid excessive URL updates during fast scrolling
   const onItemIntersected = debounce((itemElement: HTMLElement) => {
-    if (options.shouldPreserveUrl() || !itemElement) {
+    const itemsElement = options.getItemsElement()
+
+    if (!enabled || options.shouldPreserveUrl() || !itemElement || !itemsElement) {
       return
     }
 
     // Count how many items from each page are currently visible in the viewport
     const pageMap = new Map<string, number>()
-    const elements = [...options.getItemsElement().children] as HTMLElement[]
+    const elements = [...itemsElement.children] as HTMLElement[]
 
     getElementsInViewportFromCollection(itemElement, elements).forEach((element) => {
       const page = getPageFromElement(element) ?? '1'
@@ -60,5 +64,6 @@ export const useInfiniteScrollQueryString = (options: {
 
   return {
     onItemIntersected,
+    cancel: () => (enabled = false),
   }
 }

packages/core/src/types.ts

@@ -550,6 +550,7 @@ export interface UseInfiniteScrollElementManager {
 export interface UseInfiniteScrollProps {
   dataManager: UseInfiniteScrollDataManager
   elementManager: UseInfiniteScrollElementManager
+  flush: () => void
 }
 
 export interface InfiniteScrollSlotProps {

packages/react/src/InfiniteScroll.ts

@@ -212,8 +212,7 @@ const InfiniteScroll = forwardRef<InfiniteScrollRef, ComponentProps>(
       }
 
       return () => {
-        dataManager.removeEventListener()
-        elementManager.flushAll()
+        infiniteScrollInstance.flush()
         setInfiniteScroll(null)
       }
     }, [data, resolvedItemsElement, resolvedStartElement, resolvedEndElement, scrollableParent])

packages/react/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.tsx

@@ -0,0 +1,19 @@
+import { InfiniteScroll, Link } from '@inertiajs/react'
+import UserCard, { User } from './UserCard'
+
+export default ({ users }: { users: { data: User[] } }) => {
+  return (
+    <div>
+      <Link href="/infinite-scroll">Go back to Links</Link>
+      <InfiniteScroll
+        data="users"
+        style={{ display: 'grid', gap: '20px' }}
+        loading={() => <div style={{ textAlign: 'center', padding: '20px' }}>Loading...</div>}
+      >
+        {users.data.map((user) => (
+          <UserCard key={user.id} user={user} />
+        ))}
+      </InfiniteScroll>
+    </div>
+  )
+}

packages/react/test-app/Pages/InfiniteScroll/Links.tsx

@@ -0,0 +1,12 @@
+import { Link } from '@inertiajs/react'
+
+export default () => {
+  return (
+    <div>
+      <Link href="/infinite-scroll-with-link">Go to InfiniteScrollWithLink</Link>
+      <Link href="/infinite-scroll-with-link" prefetch>
+        Go to InfiniteScrollWithLink (Prefetch)
+      </Link>
+    </div>
+  )
+}

packages/svelte/src/InfiniteScroll.svelte

@@ -182,10 +182,7 @@
       : infiniteScrollInstance?.elementManager.disableTriggers()
   }
 
-  onDestroy(() => {
-    infiniteScrollInstance?.dataManager.removeEventListener()
-    infiniteScrollInstance?.elementManager.flushAll()
-  })
+  onDestroy(() => infiniteScrollInstance?.flush())
 </script>
 
 {#if !startElement && !reverse}

packages/svelte/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { inertia, InfiniteScroll } from '@inertiajs/svelte'
+  import UserCard, { type User } from './UserCard.svelte'
+
+  export let users: { data: User[] }
+</script>
+
+<div>
+  <a href="/infinite-scroll" use:inertia>Go back to Links</a>
+  <InfiniteScroll data="users" style="display: grid; gap: 20px">
+    <div slot="loading" style="text-align: center; padding: 20px">Loading...</div>
+
+    {#each users.data as user (user.id)}
+      <UserCard {user} />
+    {/each}
+  </InfiniteScroll>
+</div>