Progress Indicator not showing on $inertia.reload()

[zacksmash]

Versions:

• @inertiajs/inertia version:0.9.4
• @inertiajs/inertia-vue3 version: 0.4.7

Describe the problem:

I'm using $inertia.reload() in my mounted hook to fetch data that takes a bit longer to retrieve (3rd party API). However, doing this no longer shows the progress indicators, via InertiaProgress.

Steps to reproduce:

1. Navigate to a page, with standard injected props.
2. In your components mounted() lifecycle hook, make another request using the only option.

this.$inertia.reload({
      only: ['someApiData', 'someMoreApiData',],
})

[robsontenorio]

@zacksmash I think i am runnig similar issue. Did you solve it?

inertiajs/inertia#965 (comment)

[zacksmash]

@robsontenorio I haven't yet, I ended up throwing a custom loading indicator for my reload() request, but it would be nice if Inertia could use the built in NProgress during that.

[robsontenorio]

@zacksmash I have tried custom loading, but no luck. Could you answer my comment with your solution?

inertiajs/inertia#965 (comment)

[zacksmash]

@robsontenorio Sure, my doesn't look too different from your solution, in your comment, but here's what I have

data() {
    loading: true,
},
...
mounted() {
    this.$inertia.reload({
      only: ['someData'],
      onSuccess: () => this.loading = false
    })
  }

[robsontenorio]

@zacksmash Are you able to get that loading working when navigating to that target page using both approaches?

From any orgin page, in my case:

It works with <a href="/somepage"> go </a>
But not woks with this.$inertia.visit('/somepage')

EDIT:

• Main problem here is onStart.
• Just noticed we are using reversed logic for loading, so in your case won't be an issue.