Признак загрузки в Inertia

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

Такой поход на адрес методом GET у router устроен так же, как клик по Link. Во втором аргументе метода get можно передать колбэки: onStart срабатывает, когда визит только начался, onFinish - когда он полностью завершился, независимо от исхода. Флаг в ref удобно включать в onStart и гасить в onFinish.

Давайте опишем страницу архива:

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

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

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

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

	const loading = ref(false)

	function openArchive() {
		router.get('/posts/archive', {}, {
			onStart: () => {
				loading.value = true
			},
			onFinish: () => {
				loading.value = false
			},
		})
	}
</script>

<template>
	<h1>Posts</h1>
	<button type="button" @click="openArchive">
		Open archive
	</button>
	<p v-if="loading">
		Loading…
	</p>
</template>

На экране работника Emma показывайте, что переход к списку отделов ещё идёт, и убирайте эту пометку, когда ответ пришёл.