How do I check if the page is loading a request?

[JoaoHamerski]

For example, I want to make a new request to load some partial data like this:

const load = () => {
  router.reload({ only: ['dataLazy']})
}

But I want to show a specific loading spinner where the data is loading, not a progress bar on top of the page.
So a isLoading variable would be great to check if that given request is loading.

I could do something like that:

const load = async () => {
 isLoading.value = true
 await router.reload({ only: ['dataLazy']})
 isLoading.value = false
}

But unfortunatelly the reload doesn't return a Promise.

I also know there's a router.on('finish') event, but it's triggered on any request, I would like to know that this specific request is loading, the request I'm asking for dataLazy variable, not any request.

How would I do it? Of course, without add a lot of code in my file, I'm looking for something simple like Axios maybe?

const load = async () => {
// Set loading to true
// Get the data from an endpoint
// Set the loading to false
}

[hakimzulkufli]

Yes, you can do this with router.reload(). The sole parameter is ReloadOptions, which is basically VisitOptions without preserveScroll and preserveState.

Which means, you can do anything you want when the events are fired.

router.reload({
  only: ['dataLazy'],
  onStart: () => { isLoading.value = true },
  onFinish: () => { isLoading.value = false },
});

More information: https://inertiajs.com/manual-visits#event-callbacks

Ps. Ancient question, I know. I thought I would answer this anyway since this came up in my search result.