Ожидание отложенных данных в Inertia

Допустим, права пользователя уже отложены на сервере, а на экране нужен аккуратный знак загрузки, а не пустое место или условие в каждом куске шаблона. Inertia даёт компонент Deferred из пакета @inertiajs/vue3: он ждёт указанный пропс и только потом рисует основной слот.

В атрибуте data передают имя пропса или массив имён. Слот fallback показывают, пока значение ещё в пути. Когда догрузка завершилась, на месте fallback появляется содержимое с готовыми данными.

Давайте снова отложим пропс permissions на сервере:

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

	Route::get('/users', function () {
		return Inertia::render('Users/Index', [
			'users' => ['Anna', 'Boris'],
			'permissions' => Inertia::defer(
				fn () => ['edit', 'publish'],
			),
		]);
	});
?>

Давайте обернём список прав в Deferred со слотом загрузки:

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

	defineProps({
		users: Array,
		permissions: Array,
	})
</script>

<template>
	<ul>
		<li v-for="user in users" :key="user">
			{{ user }}
		</li>
	</ul>
	<Deferred data="permissions">
		<template #fallback>
			<div>Loading</div>
		</template>
		<ul>
			<li
				v-for="permission in permissions"
				:key="permission"
			>
				{{ permission }}
			</li>
		</ul>
	</Deferred>
</template>

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