Enhancing Lazy Loading and Merge Functionality in Inertia v2

[HichemTab-tech]

💬 Enhancing Lazy Loading and Merge Functionality in Inertia v2

🔍 Overview:
We have two new components in Inertia v2: WhenVisible and Deferred. The WhenVisible component triggers a request and loads data when the corresponding HTML becomes visible (commonly used for infinite scroll scenarios). The Deferred component, on the other hand, defers loading data until after the page has initially loaded, while displaying a loading state. On the backend, we have the defer method to handle deferred requests, and the merge method to allow merging new data with existing data.

⚠️ Current Issue:
I need to achieve a "merged but deferred" behavior with the WhenVisible component. Here's the problem:

• 🎯 Desired Behavior: I have a list (sometimes an infinite scroll) that could either contain a lot of items or just a few. I need:
  • The data should not load on the initial page load but instead load after the page loads (similar to Deferred).
  • When loading data dynamically (e.g., infinite scroll), it should use the merge functionality to add to existing data instead of replacing it.
• 🤔 Problem with Current Options:
  • If I use WhenVisible, the request executes directly the first time because no data is initially loaded on the frontend. This defeats the purpose of deferring until visibility.
  • The backend lazy method skips initial data loading, which works as needed here, but it doesn't support merge.
  • Using Deferred with merge works, but it requires placing the WhenVisible component inside a Deferred component. This results in the WhenVisible request being triggered only after the deferred data loads, which is redundant and suboptimal.

💡 Proposed Solutions:

1. Add a Merge Option to lazy Method: Enhance the lazy method on the backend to support the merge behavior, making it more suitable for infinite lists that should load in a deferred manner.

   Inertia::lazy(fn () => [
       'items' => Item::query()->paginate()->toArray(),
   ])->merge();

   This example shows how the lazy method could be extended to include a merge option, allowing new data to be added to the existing dataset rather than replacing it entirely. This would be useful for scenarios where the list is dynamically loaded (e.g., infinite scrolling).

2. Customize WhenVisible to Ignore First Trigger: Add a customization option for WhenVisible to not execute on the first render if the data is already present, allowing more control over when the data should be fetched. This is particularly useful when we have initial data loaded on the page and want to avoid an unnecessary request on the first trigger.

   <ul>
      {items?.map((item) => (
          <li key={item.id}>{item.name}</li>
      ))}
   </ul>
   <WhenVisible ignoreFirst={false} data='items' always />

   In this example, the WhenVisible component is configured with the always prop which allow it to execute the request on each reach of whenvisible .

🔄 Recap of Needs:

• A list that could be long (infinite scroll) or short (just a few items visible initially).
• Data should load after the page loads (like Deferred), but also support merge for dynamic extension of the data.
• Current solutions (lazy, merge, WhenVisible, Deferred) don't quite provide the desired combination without cumbersome nesting or redundant requests.

Would ❤️ to get thoughts from the team on how we could address this. Is adding merge to lazy a feasible enhancement, or can we introduce more control in the WhenVisible component?

[HichemTab-tech]

Well after second thinking i would go with the second proposition which is to add a prop ignoreFirst because i could fixed the issue with a work-arround solution like this :

<Deferred fallback={<div>Loading....</div>} data='items'>
                {items?.length ? items.map((item) => (
                    
                )) : (
                    <div className="flex items-center justify-center h-full text-gray-500">
                        No items available
                    </div>
                )}
                {items?.length > 20 && (
                    <WhenVisible
                        fallback={(
                            <SpinnerWithRetry/>
                        )}
                        data='items'
                    />
                ) || null}
            </Deferred>

but like this i explicitly said that the offset is 20 and it's not dynamic so like i said the ignoreFirst or skipFirst is very helpful in this case.