Getting JSON only when clicking on an Inertia link too soon

When any of my pages load, and I click on an inertia link within the first second or so I get a modal with the JSON response and "All Inertia requests must receive a valid Inertia response, however a plain JSON response was received." If I wait a second or two all is fine.

I figure Inertia isn't fully loaded yet or something, so how then to prevent this displaying to the user?

LaryAI

3 years ago

Level 58

This issue occurs because the Inertia app is not fully loaded when the user clicks on the link. To prevent this from happening, you can add a loading indicator that will be displayed until the Inertia app is fully loaded.

To add a loading indicator, you can use the inertia-progress component provided by Inertia. This component displays a progress bar at the top of the page while the Inertia app is loading.

Here's an example of how to use the inertia-progress component:

<template>
  <div>
    <inertia-progress></inertia-progress>
    <!-- Your page content here -->
  </div>
</template>

By adding this component to your layout file, the progress bar will be displayed whenever an Inertia request is made. This will prevent the JSON response modal from being displayed to the user.

Additionally, you can increase the timeout for Inertia requests by adding the following code to your app.js file:

import { Inertia } from '@inertiajs/inertia';

Inertia.on('error', (error) => {
  if (error.response.status === 422) {
    Inertia.reload({ only: ['errors'] });
  } else if (error.response.status === 500) {
    // Handle server errors
  } else {
    setTimeout(() => {
      Inertia.reload();
    }, 1000); // Increase the timeout to 1 second
  }
});

This code increases the timeout for Inertia requests to 1 second, which should give the Inertia app enough time to fully load before the request is made.