onFinish of router.reload called when page finished loading

[timyourivh]

Version:

• @inertiajs/vue3 version: 1.0.14

Describe the problem:

Having code like this on a page:

const loading = ref(true)

onMounted(() => {
  router.reload({
    only: [
      'totalUsage'
    ],
    onStart: () => {
      loading.value = true
    },
    onFinish: () => {
      loading.value = false
    }
  })
})

Will not work because the onFinish in this reload is also executed when the page itself has finished loading. This will set the value of loading to false when the page is shown. Rendering the feedback useless.

This happens only when visiting a page though Inertia and router.reload'ing on that page, not when reloading a page with the browser (initial visit)

The timing looks something like this:

Event	loading
Click link to page	-
Page component mounted	true
onMounted is called, router.reload begins.	true
onFinish of the page visit is called.	false
router.reload is still processing	false
onFinish is called again after reload finished	false

This happens so fast that the user doesn't ever see the loading feedback for the router.reload. My suspicion is that the onFinish in any inertia router visit is listening to the same event. Meaning that this reload is called twice because of the page finishing loading and the reload finishing loading.

Here's a console output of this series of events with timestamps (dayjs format: HH:mm:ss.SSS):

We do this to make the page appear faster and lazy load the data later (due to external api calls from the back end). It could be possible that this is not the way to do it. If so, I would like to know how this should be done.

Steps to reproduce:

1. Create page component, with the following code:

   Click to expand

   <script setup lang="ts">
   import { Link, router } from '@inertiajs/vue3'
   import { onMounted, ref } from 'vue'
   
   const loading = ref(true)
   
   onMounted(() => {
     router.reload({
       only: ['data'],
       onStart: () => {
         loading.value = true
         console.log(`onStart called. loading.value: ${loading.value}`)
       },
       onFinish: () => {
         loading.value = false
         console.log(`onFinish called. loading.value: ${loading.value}`)
       }
     })
   })
   </script>
   
   <template>
     <div>
       <Link href="/test">
         test
       </Link>
       <Link href="/test2">
         test2
       </Link>
       Content loading below:
       <hr>
       <div>
         <span v-if="loading">I am indeed loading, hold on...</span>
         <span v-else>Done loading. Even though on a new visit I should reload.</span>
       </div>
     </div>
   </template>
   

   Optionally you could create 2 components (Test1 and Test2), but it has the same effect.

2. Create 2 routes to our web.php:

   Click to expand

   Route::get('/test', function () {
       return inertia('Test', [
           'data' => Inertia::lazy(function() {
               sleep(3); // To simulate api call (exaggerated)
               return;
           })
       ]);
   });
   
   Route::get('/test2', function () {
       return inertia('Test', [
           'data' => Inertia::lazy(function() {
               sleep(3);
               return;
           })
       ]);
   });

3. Visit /test

4. Click the test2 link on the page and observe the console and/or page