Загрузка при появлении в Inertia

Давайте изучим компонент WhenVisible. Он следит за тем, виден ли обёрнутый им блок в окне браузера, и в нужный момент запрашивает данные с сервера. Пропс указывают атрибутом data, пока значение ещё не пришло, рисуют слот fallback.

На Laravel такой пропс удобно отдавать через defer: первый ответ рисует страницу без него, а компонент догружает поле, когда человек доскроллит до блока. По умолчанию запрос срабатывает один раз, пока элемент хотя бы раз оказался на экране.

Давайте отдадим заголовок сразу, а статистику отложим:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/reports', function () {
		return Inertia::render('Reports/Index', [
			'title' => 'Weekly report',
			'stats' => Inertia::defer(
				fn () => [
					'views' => 1204,
					'clicks' => 89,
				],
			),
		]);
	});
?>

Давайте оставим заполнитель вверху, а блок статистики обернём в WhenVisible:

<script setup>
	import { WhenVisible } from '@inertiajs/vue3'

	defineProps({
		title: String,
		stats: Object,
	})
</script>

<template>
	<h1>{{ title }}</h1>
	<div class="spacer">Scroll down</div>

	<WhenVisible data="stats">
		<template #fallback>
			<p>Loading stats...</p>
		</template>

		<p>Views: {{ stats.views }}</p>
		<p>Clicks: {{ stats.clicks }}</p>
	</WhenVisible>
</template>

Сделайте страницу работников архива, где список виден сразу, а блок с пробегом появляется только после прокрутки вниз и сначала показывает, что данные ещё едут.