WhenVisible & infinite scroll not refiring when still visible

[moymat]

Hi everyone !

I'm not creating an issue for this since I'm not sure if it's a bug per se, but I noticed that, when I use WhenVisible and merge data with a small pagination per_page value, the next page is not fetched on large screen since the component is still visible. It fires again correctly if I manage to hide the element from the viewport (reducing the width of the browser for example) or on smallest screens.

Template :

<template>
    <div class="flex flex-col items-center justify-center gap-4 py-4">
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
            <Card
                class="max-w-96"
                v-for="item in data"
                :key="item.id"
                :item="item"
            />
            <template v-for="i in skeletonRange" :key="i">
                <Card v-show="loading" class="h-52 animate-pulse bg-gray-300" />
            </template>
        </div>
        <WhenVisible
            :always="pagination.current_page < pagination.last_page"
            :params="{
                data: { page: pagination.current_page + 1 },
                only: ['data', 'pagination'],
                onBefore() {
                    loading = true;
                },
                onSuccess() {
                    loading = false;
                },
            }"
            :buffer="200"
        />
    </div>
</template>

Controller :

class ItemController extends Controller
{
    public function getAll(): Response
    {
        $items = Item::latest()->paginate(25); // if value is 5 for example, the issue appears, not for 25
        return inertia('Item', [
            'data' => inertia()->merge(fn() => $items->items()),
            'pagination' => $items->toArray()
        ]);
    }
}

Is there a way to make it work even with small per_page value ?

[moymat]

Managed to make it work like this :

<template>
    <div class="flex flex-col items-center justify-center gap-4 py-4">
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
            <Card
                class="max-w-96"
                v-for="item in data"
                :key="item.id"
                :item="item"
            />
            <template v-for="i in skeletonRange" :key="i">
                <Card v-show="loading" class="h-52 animate-pulse bg-gray-300" />
            </template>
        </div>
        <WhenVisible
            always
            v-if="pagination.current_page < pagination.last_page"
            :key="pagination.current_page"
            :params="{
                data: { page: pagination.current_page + 1 },
                only: ['data', 'pagination'],
                onBefore() {
                    loading = true;
                },
                onSuccess() {
                    loading = false;
                },
            }"
            :buffer="200"
        />
    </div>
</template>