Начало запроса в Inertia

Пусть на панели постов человек часто переходит по ссылкам Inertia, а рядом с заголовком нужна надпись «Loading…», пока ответ ещё не пришёл. Дублировать один и тот же флаг в каждом компоненте страницы неудобно: запрос может начаться и из Link, и из Form, и из метода get.

Событие start срабатывает, когда запрос к серверу уже отправлен. Его ловят методом on у router один раз при старте приложения. В обработчике доступны детали визита, в том числе адрес, на который идёт поход.

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

<?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',
		]);
	});
?>

Давайте заведём общий флаг ожидания и подпишемся на start при создании приложения:

import { createInertiaApp } from '@inertiajs/vue3'
import { router } from '@inertiajs/vue3'
import { ref } from 'vue'

export const visitPending = ref(false)

createInertiaApp({
	// ...
})

router.on('start', () => {
	visitPending.value = true
})

Давайте выведем заголовок, ссылку и надпись ожидания из общего флага:

<script setup>
	import { Link } from '@inertiajs/vue3'
	import { visitPending } from '../../app.js'

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

<template>
	<h1>{{ title }}</h1>
	<p v-if="visitPending">
		Loading…
	</p>
	<Link href="/posts/archive">
		Open archive
	</Link>
</template>

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