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

[FlusherDock1]

Same problem, no way to use deferred props with InfiniteScroll

[krzysztofengineer]

any luck with that? I've switched to infinite scroll and now lost my skeleton deferred loaders which annoys me

[krzysztofengineer]

As a workaround I've ended up using Inertia::defer with deepMerge:

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

with a custom IntersectionObserver on frontend:

function InfiniteScrollTrigger({ children, onVisible }: { children: React.ReactNode; onVisible: () => void }) {
    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                onVisible();
            }
        });
        if (ref.current) {
            observer.observe(ref.current);
        }
        return () => {
            observer.disconnect();
        };
    }, [onVisible]);

    return <div ref={ref}>{children}</div>;
}

so my final frontend code looks like this:

 <Deferred data="offers" fallback={<div className="mt-4"><OffersSkeleton viewMode={viewMode} /></div>}>
                            {offers ? (
                                <>
                                    {offers.data.length === 0 ? (
                                        <NoResultsEmpty />
                                    ) : viewMode === 'list' ? (
                                        <div className="flex flex-col gap-4">
                                            {offers.data.map((offer) => (
                                                <OfferListItem key={offer.hash} offer={offer} />
                                            ))}
                                        </div>
                                    ) : (
                                        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
                                            {offers.data.map((offer) => (
                                                <OfferGridItem key={offer.hash} offer={offer} />
                                            ))}
                                        </div>
                                    )}

                                    {offers.next_page_url && (
                                        <InfiniteScrollTrigger onVisible={() => {
                                            router.visit(offers.next_page_url!, {
                                                only: ['offers'],
                                                preserveScroll: true,
                                                preserveState: true,
                                            });
                                        }}>
                                            <div className="mt-4">
                                                <OffersSkeleton viewMode={viewMode} />
                                            </div>
                                        </InfiniteScrollTrigger>
                                    )}
                                </>
                            ) : null}
                        </Deferred>

it seems to do the job for now and I did not see any issues for now

[gordanielyan]

You can use Inertia::scroll(...)->defer()

[pascalbaljet]

Thanks for sharing! I recently added this, but it's not documented yet as I wanted to play around with it some more first :)

[gordanielyan]

Thanks for sharing! I recently added this, but it's not documented yet as I wanted to play around with it some more first :)

i have made a pull request to laravel adapter to use optional() with infinite scroll
i needed that for work, any chance you can test that too?