How can I make the <InfiniteScroll> and <Deferred> components work together?

[artygrand]

I want to defer data loading and merge it later

My first idea was to use something like:
Inertia::defer(fn () => Inertia::scroll(fn () => ItemResource::collection($items)))

But the deferred request returns an empty result.

[aalhoura]

I think there are two issues with this.

Firstly, the problem with this

Inertia::defer(fn () => Inertia::scroll(fn () => ItemResource::collection($items)))

is that the first closure you are passing to Inertia::defer is returning another closure, and that does not work. The first closure will need to return the data for Inertia to serialize and pass to the frontend. If the first closure returns another closure, Inertia will not execute the second closure, and hence you see nothing on the frontend. You could verify this with something simpler like this:

Inertia::defer(fn () => fn () => 'Hello')

As a workaround, you could explicitly call the second closure like so:

Inertia::defer(fn () => (Inertia::scroll(fn () => ItemResource::collection($items))())

Secondly, on the frontend, the deferred prop is not appended to the page's scrollProps. If you inspect $page.scrollProps, you will see that it is missing the deferred prop. I am not sure how to fix this.

CC @pascalbaljet