Let's quickly look at a thing called progress indicators in Inertia. What happens if some page takes longer to load? Now, our pages load very quickly. But what if the data for the posts comes after a while, so there is no feedback on the screen about loading something?
For example, we can add a sleep for three seconds to the PostController.
app/Http/Controllers/PostController.php:
class PostController extends Controller{ public function index(): Response { sleep(3); $posts = PostResource::collection(Post::all()); return Inertia::render('Posts/Index', compact('posts')); }}At the top left, we can see a progress indicator.
The default progress indicator is a lightweight wrapper around the NProgress. When the Inertia app is created, you can provide some options to the indicator, like color, or add a spinner.
resources/js/app.js:
// ... createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) return pages[`./Pages/${name}.jsx`] }, setup({ el, App, props }) { createRoot(el).render(<App {...props} />) }, progress: { color: '#f00', showSpinner: true, },})