Мгновенный переход в Inertia

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

Для такого приёма метод visit у объекта router принимает опцию component с именем целевой страницы. Inertia сразу рисует этот компонент, а запрос к Laravel уходит в фоне. Общие пропсы с текущей страницы переносятся сами, а пропсы, которые отдаёт только целевой маршрут, появятся после ответа. Целевой компонент должен терпеть их отсутствие: условный вывод или необязательная цепочка в шаблоне не дадут упасть на промежуточном кадре.

Давайте опишем главную и панель с цифрами:

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

	Route::get('/', function () {
		return Inertia::render('Home');
	});

	Route::get('/dashboard', function () {
		return Inertia::render('Dashboard', [
			'stats' => ['visits' => 128],
		]);
	});
?>

Давайте добавим кнопку перехода с опцией component и выведем цифры, когда они уже пришли:

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

	function openDashboard() {
		router.visit('/dashboard', {
			component: 'Dashboard',
		})
	}
</script>

<template>
	<h1>Home</h1>
	<button type="button" @click="openDashboard">
		Dashboard
	</button>
</template>

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

<template>
	<h1>Dashboard</h1>
	<p v-if="stats">
		Visits: {{ stats.visits }}
	</p>
	<p v-else>Loading stats...</p>
</template>

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