Индикатор перехода в Inertia

Давайте изучим индикатор перехода. Пока Inertia ждёт ответ сервера на визит, клиент может показать тонкую полоску прогресса у верхней границы страницы. Так человек видит, что переход уже начался, хотя документ браузера не перезагружается целиком.

По умолчанию Inertia включает такой индикатор для обычных визитов. Управление им сосредоточено в вызове createInertiaApp: свойство progress задаёт задержку появления, цвет полоски и связанные настройки обёртки над NProgress. Если свойство отключить, полоска не рисуется, и тогда обратную связь нужно строить самим.

Давайте при запуске клиента явно оставим встроенный индикатор включённым:

import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
	progress: {
		includeCSS: true,
		showSpinner: false,
	},
})

Давайте опишем две страницы постов и ссылку между ними:

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

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'Posts',
		]);
	});

	Route::get('/posts/archive', function () {
		return Inertia::render('Posts/Archive', [
			'title' => 'Archive',
		]);
	});
?>

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

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

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

<template>
	<h1>{{ title }}</h1>
	<Link href="/posts/archive">
		Open archive
	</Link>
</template>

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