Inertia 2.2

Overview Modern applications often struggle with large datasets. Loading 5,000 log entries at once creates massive latency and a poor user experience. While standard pagination solves the performance issue, it breaks the fluid experience users expect. The Inertia 2.2 InfiniteScroll component bridges this gap, providing a high-performance, bidirectional scrolling interface with minimal boilerplate. Prerequisites To follow along, you should be comfortable with Laravel and the Inertia.js ecosystem. You will need a project running Inertia 2.2 or higher and a backend controller returning a standard Laravel paginated collection. Key Libraries & Tools * Laravel: The backend framework handling data fetching and pagination logic. * Inertia.js: The glue between your PHP backend and JavaScript frontend. * InfiniteScroll: The specific UI component for managing scroll-triggered requests. Code Walkthrough Step 1: Server-Side Preparation Instead of passing a raw collection, use the `Inertia::scroll` method in your controller. This helper tells the frontend how to handle appending or prepending data. ```php return inertia('Logs/Index', [ 'entries' => Inertia::scroll(Log::paginate(15)) ]); ``` Step 2: Implementing the Frontend Component Wrap your loop with the `InfiniteScroll` component. You must point the `data` prop to your collection name. ```vue <template> <InfiniteScroll :data="entries"> <template #default="{ item }"> <div :key="item.id">{{ item.message }}</div> </template> </InfiniteScroll> </template> ``` Step 3: Manual Control and Slots If you need to show a footer or limit automatic fetching, use the `manual-after` prop. You can then use the `#next` or `#previous` slots to provide custom triggers. ```vue <InfiniteScroll :data="entries" :manual-after="5"> <template #next="{ hasMore, fetch, loading }"> <button v-if="hasMore" @click="fetch" :disabled="loading"> Load More </button> </template> </InfiniteScroll> ``` Syntax Notes The component utilizes **scoped slots** to expose internal state, such as `loading`, `fetch`, and `hasMore`. This allows you to build completely custom UI triggers while the component manages the network logic and URL synchronization. Practical Examples This technique is ideal for **activity feeds**, **audit logs**, or **e-commerce product grids** where users might want to share a specific location in a list. Because the component updates the URL as you scroll, bookmarks remain valid for specific pages. Tips & Gotchas Always ensure your frontend data types reflect the change from a flat array to a paginated object. When switching to pagination, your data will now live under a `.data` property, which often requires a quick update to your type definitions or loop logic to prevent undefined errors.