Повтор при появлении в Inertia

Давайте рассмотрим ситуацию, когда человек листает длинную ленту: блок с ценами уходит вверх за край экрана, потом снова возвращается при прокрутке назад. Если WhenVisible уже срабатывал, по умолчанию он больше не дергает сервер, хотя цифры на складе за это время могли измениться.

Атрибут always включает режим, при котором каждый новый заход блока в область видимости снова запускает загрузку указанного пропса. Слот fallback по-прежнему относится к первому показу, а для следующих запросов удобен слот с флагом fetching в основном содержимом.

Давайте отдадим ленту и отложенную котировку:

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

	Route::get('/market', function () {
		return Inertia::render('Market/Feed', [
			'items' => ['News', 'Chart', 'Notes'],
			'quote' => Inertia::defer(
				fn () => [
					'symbol' => 'ACME',
					'price' => random_int(90, 110),
				],
			),
		]);
	});
?>

Давайте обернём котировку в WhenVisible с атрибутом always:

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

	defineProps({
		items: Array,
		quote: Object,
	})
</script>

<template>
	<ul>
		<li v-for="item in items" :key="item">
			{{ item }}
		</li>
	</ul>
	<div class="spacer">Keep scrolling</div>

	<WhenVisible data="quote" always>
		<template #default="{ fetching }">
			<p>{{ quote.symbol }}: {{ quote.price }}</p>
			<p v-if="fetching">Refreshing...</p>
		</template>

		<template #fallback>
			<p>Loading quote...</p>
		</template>
	</WhenVisible>
</template>

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