Load more does not show up after first time even in throttling from network tab?

Trying to implement the infinite scroll and it working but the loading more text does not pop up to show the user as a feedback that data is loading.

My when visible component that inertia provides.

 <WhenVisible
            :always="!reachedEnd"
            :params="{
                data: {
                    page: usePage().props.pagination.current_page + 1,
                    ...(search ? { search } : {}),
                    ...(sort_by ? { sort_by } : {}),
                },
                preserveUrl: true,
                preserveState: true,
                replace: true,
                only: ['films', 'pagination'],
            }"
        >
            <template #fallback> loading more... </template>
        </WhenVisible>

my controller method

 public function index()
    {

        // for searching with title or director
        $search = request()->input('search');
        $sortBy = request()->input('sort_by');

        $query = VerifiedFilm::query();

        // sorting
        $query->when($sortBy ?? false, function ($q) use ($sortBy) {
            $q->orderBy('imdb_rating', $sortBy);
        });

        //searching functionality
        $query->when($search ?? false, function ($q) use ($search) {
            $q->whereAny(['title', 'director'], 'LIKE', "%" . $search . "%");
        });

        $films = $query->paginate(10)->withQueryString();
        // dd($films);

        return Inertia::render('Films/Index', [
            'films' => Inertia::deepMerge(fn() => $films->items()), //deepmerge for object/array to be nested deep merge
            'pagination' => Arr::except($films->toArray(), 'data'),
            'search' => $search,
            'sort_by' => $sortBy
        ]);
    }