Inertia: Allow custom loading indicators

[reinink]

Currently Inertia uses nprogress for its loading indicator. However, it would be nice to support other libraries. We'd simply have to expose this as a configuration option somehow.

For example:

new Vue({
  render: h => h(Inertia, {
    props: {
      component: app.dataset.component,
      props: JSON.parse(app.dataset.props),      
      resolveComponent: (component) => { ... },
      beforeVisit: () => { /* start loading indicator */ },
      afterVisit: () => { /* stop loading indicator */ },
    },
  }),
}).$mount(app)

[reinink]

I actually think a better approach is to allow Inertia level customization directly via Inertia, and not through the adapters.

Inertia.beforeVisit(() => {}),
Inertia.afterVisit(() => {}),
Inertia.startProgress(() => {}),
Inertia.incrementProgress(() => {}),
Inertia.stopProgress(() => {}),

[MichaelDeBoey]

I do think we should also support this in some way or another via the adapters, since those are really a component mapping over the Inertia API

[reinink]

I'm not sure I agree. There is nothing wrong with using Inertia directly (ie. Inertia.visit()), and we're really just talking about configuration here. To make every adapter responsible for this just means more work at the adapter level.

[MichaelDeBoey]

Just seems a bit weird to have the following code then:

import InertiaVue, { Inertia } from 'inertia-vue'
import Vue from 'vue'

Inertia.beforeVisit(() => {})
Inertia.afterVisit(() => {})
Inertia.startProgress(() => {})
Inertia.incrementProgress(() => {})
Inertia.stopProgress(() => {})

Vue.use(InertiaVue)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaVue, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
    },
  }),
}).$mount(app)

[dbpolito]

This is something i would love to see, in my case i customised the CSS as a workaround but i would love to use something built-in i already have on my project.

Any ideas on how to solve this? I would love to contribute on this one.

Are we going with something simpler as https://github.com/inertiajs/inertia/issues/9#issuecomment-493676180 or https://github.com/inertiajs/inertia/issues/77?

[snaptopixel]

I've built a similar solution to Inertia that handles this via css. Whenever a request is in flight the page gets an is-loading css class. Then it's up to the user to figure out how/what they want to show while things are loading.

In my case I have a shimmer class that can be added to any element that looks like:

.is-loading .shimmer {
  /* fancy animated gradient bg here */
}

[billmn]

This could very very useful: https://github.com/inertiajs/inertia/issues/9#issuecomment-493676180

[itsthejoker]

Alternatively, can I just show a gif as a loading indicator?

[RahulDey12]

I actually think a better approach is to allow Inertia level customization directly via Inertia, and not through the adapters.

Inertia.beforeVisit(() => {}),
Inertia.afterVisit(() => {}),
Inertia.startProgress(() => {}),
Inertia.incrementProgress(() => {}),
Inertia.stopProgress(() => {}),

Can I use it on a particular page

[reactor123]

Currently Inertia uses nprogress for its loading indicator. However, it would be nice to support other libraries. We'd simply have to expose this as a configuration option somehow.

For example:

new Vue({
  render: h => h(Inertia, {
    props: {
      component: app.dataset.component,
      props: JSON.parse(app.dataset.props),      
      resolveComponent: (component) => { ... },
      beforeVisit: () => { /* start loading indicator */ },
      afterVisit: () => { /* stop loading indicator */ },
    },
  }),
}).$mount(app)

i have tried this solution but is not working

[Juhlinus]

Currently Inertia uses nprogress for its loading indicator. However, it would be nice to support other libraries. We'd simply have to expose this as a configuration option somehow.
For example:

new Vue({
  render: h => h(Inertia, {
    props: {
      component: app.dataset.component,
      props: JSON.parse(app.dataset.props),      
      resolveComponent: (component) => { ... },
      beforeVisit: () => { /* start loading indicator */ },
      afterVisit: () => { /* stop loading indicator */ },
    },
  }),
}).$mount(app)

i have tried this solution but is not working

Hi @reactor123 !

This is a proposed change and not yet implemented, unfortunately.

[billmn]

The ability to set a custom progress indicator is on roadmap.

Take a look to this tweet of Jonathan: https://twitter.com/reinink/status/1290666276730408965?s=21

[reinink]

Custom loading indicators are now possible thanks to the new event system (#208). I hope to tag a release tomorrow, and I also plan to add documentation to the website explaining how to use the event system to add your own custom loading indicators. 🙌

[ycs77]

@reinink The Loading indicator section need added the progress description.

[reinink]

@ycs77 Yup, totally. It's on my TODO list. 👍