Add global loading state

[pabueco]

First of all, thank you so much for this awesome project!

I've been working with Inertia for a few months and in multiple projects. Not sure if anyone else faced this issue but at least for me it happens very often that I want to disable the inputs or show a loading animation after a user submits a form. There are already a few ways to handle this, but I think it would be really nice to have it baked into Inertia.

I am using Vue 3 in the most recent project and have been doing the global loading state like this:

import { Inertia } from '@inertiajs/inertia'

const app = createApp(/*...*/);

app.config.globalProperties.$loading = reactive({
  is: false,
  start: () => {
    app.config.globalProperties.$loading.is = true
  },
  end: () => {
    app.config.globalProperties.$loading.is = false
  },
})

Inertia.on('start', () => app.config.globalProperties.$loading.start())
Inertia.on('finish', () => app.config.globalProperties.$loading.end())

This is just very simple but it solves the propblem for me. However I'm not sure if it's a good idea to provide methods to manually set the loading state.

I think it would be quite nice to have something like this available with $page.loading (or similar) if it's useful for other people as well.

[reinink]

Yeah, I've had the exact same thought, the problem is that when you're on a page with a form, and you show something based on this loading indicator (maybe a spinner), but you then click another inertia link elsewhere on the page (maybe in the main menu), this would cause the spinner to be shown on the page...which is really weird. What you actually only want is for the loading indicator to be shown if the form itself is submitted.

Basically, as much as I'd love for this to be global, I think it has to be handled as local state. I normally do it like this:

this.$inertia.post('/events', this.form, {
  onStart: () => (this.sending = true),
  onFinish: () => (this.sending = false),
})

So yeah, I don't really think globally makes sense...unless I'm missing something.

[pabueco]

You're right, that would be weird. However this issue can be solved by ignoring visits using GET requests and only starting the loading if the visit is using POST, PATCH, PUT or DELETE methods. That way spinners don't get triggered from navigating to another page. In this case, maybe sending is a better word for it than loading.

Inertia.on('start', (e) => {
  if (['post', 'patch', 'put', 'delete'].includes(e.detail.visit.method)) {
    app.config.globalProperties.$sending.start()
  }
})

You could also provide the functionality to overwrite the methods. And maybe even include/exclude paths or disable it for specific pages.

I really think it could be useful that way, but what do you think?