Завершение запроса в Inertia

Допустим, надпись «Loading…» уже включается глобальным слушателем start. Если гасить её только по success, после ошибки проверки экран так и останется в состоянии ожидания, хотя запрос давно завершился.

Событие finish приходит, когда Ajax-запрос Inertia полностью закончился: и после удачного ответа, и после ответа с ошибками проверки. Его удобно парировать с start: один слушатель включает индикатор, другой всегда его выключает.

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

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

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		$request->validate([
			'title' => 'required',
		]);

		return back();
	});
?>

Давайте допишем слушатель finish рядом с уже заведённым флагом ожидания:

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

export const visitPending = ref(false)

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

router.on('finish', () => {
	visitPending.value = false
})

Давайте покажем форму и общий индикатор:

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

<template>
	<h1>New post</h1>
	<p v-if="visitPending">
		Loading…
	</p>
	<Form action="/posts" method="post">
		<input type="text" name="title" />
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте отправку карточки работника Nina так, чтобы общий индикатор ожидания пропадал и после успеха, и после ошибки проверки полей.