wip

Author: pascalbaljet

demo-app/package-lock.json

@@ -27,7 +27,7 @@
     "devDependencies": {
         "@headlessui/react": "^2.1.0",
         "@heroicons/react": "^2.1.4",
-        "@inertiajs/react": "^1.3.0||^2.0.0",
+        "@inertiajs/react": "^1.3.0||^2.1.11",
         "@vitejs/plugin-react": "^4.3.1",
         "axios": "^1.6.0",
         "clsx": "^2.1.1",
@@ -46,7 +46,7 @@
         "vite": "^6.1"
     },
     "peerDependencies": {
-        "@inertiajs/react": "^1.3.0||^2.0.0",
+        "@inertiajs/react": "^1.3.0||^2.1.11",
         "axios": "^1.6.0",
         "react": "^18.2.0||^19.0.0",
         "react-dom": "^18.2.0||^19.0.0"

react/package-lock.json

@@ -1,7 +1,7 @@
 import { createElement, useEffect, useState, useRef } from 'react'
 import { default as Axios } from 'axios'
-import { except, kebabCase, generateId, sameUrlPath } from './helpers'
-import { router, usePage } from '@inertiajs/react'
+import { except, kebabCase, generateId, sameUrlPath, isInertiaV2 } from './helpers'
+import { router, usePage, progress } from '@inertiajs/react'
 import { mergeDataIntoQueryString } from '@inertiajs/core'
 import { createContext, useContext } from 'react'
 import ModalRenderer from './ModalRenderer'
@@ -413,10 +413,12 @@ export const ModalStackProvider = ({ children }) => {
                 })
             }
 
-            //
-
             onStart?.()
 
+            if (isInertiaV2()) {
+                progress.start()
+            }
+
             Axios({
                 url,
                 method,
@@ -431,6 +433,11 @@ export const ModalStackProvider = ({ children }) => {
                     onError?.(...args)
                     reject(...args)
                 })
+                .finally(() => {
+                    if (isInertiaV2()) {
+                        progress.finish()
+                    }
+                })
         })
     }
 

react/package.json

@@ -1,2 +1,8 @@
+import { router } from '@inertiajs/react'
 import { generateId, sameUrlPath, except, only, rejectNullValues, kebabCase, isStandardDomEvent } from './../../vue/src/helpers.js'
-export { generateId, sameUrlPath, except, only, rejectNullValues, kebabCase, isStandardDomEvent }
+
+function isInertiaV2() {
+    return router.push && typeof router.push === 'function'
+}
+
+export { generateId, sameUrlPath, except, only, rejectNullValues, kebabCase, isStandardDomEvent, isInertiaV2 }

react/src/ModalRoot.jsx

@@ -26,7 +26,7 @@
         "test": "vitest"
     },
     "devDependencies": {
-        "@inertiajs/vue3": "^1.3.0||^2.0.0",
+        "@inertiajs/vue3": "^1.3.0||^2.1.11",
         "@vitejs/plugin-vue": "^5.2.0",
         "@vitest/coverage-v8": "^2.1.1",
         "@vitest/ui": "^2.1.1",
@@ -47,7 +47,7 @@
         "vue": "^3.4.x"
     },
     "peerDependencies": {
-        "@inertiajs/vue3": "^1.3.0||^2.0.0",
+        "@inertiajs/vue3": "^1.3.0||^2.1.11",
         "axios": "^1.6.0",
         "vue": "^3.4.x"
     },

react/src/helpers.js

@@ -1,3 +1,5 @@
+import { router } from '@inertiajs/vue3'
+
 let generateIdUsingCallback = null
 
 function generateIdUsing(callback) {
@@ -131,4 +133,8 @@ function isStandardDomEvent(eventName) {
     return standardPatterns.some((pattern) => pattern.test(lowerEventName))
 }
 
-export { generateIdUsing, sameUrlPath, generateId, except, only, rejectNullValues, kebabCase, isStandardDomEvent }
+function isInertiaV2() {
+    return router.push && typeof router.push === 'function'
+}
+
+export { generateIdUsing, sameUrlPath, generateId, except, only, rejectNullValues, kebabCase, isStandardDomEvent, isInertiaV2 }

vue/package-lock.json

@@ -1,7 +1,6 @@
 import { computed, readonly, ref, markRaw, h, nextTick } from 'vue'
-import { generateId, except, kebabCase } from './helpers'
-import { router } from '@inertiajs/vue3'
-import { usePage } from '@inertiajs/vue3'
+import { generateId, except, kebabCase, isInertiaV2 } from './helpers'
+import { router, usePage, progress } from '@inertiajs/vue3'
 import { mergeDataIntoQueryString } from '@inertiajs/core'
 import { default as Axios } from 'axios'
 import ModalRoot from './ModalRoot.vue'
@@ -346,6 +345,10 @@ function visit(
 
         onStart?.()
 
+        if (isInertiaV2()) {
+            progress.start()
+        }
+
         Axios({ url, method, data, headers })
             .then((response) => {
                 onSuccess?.(response)
@@ -355,6 +358,11 @@ function visit(
                 onError?.(...args)
                 reject(...args)
             })
+            .finally(() => {
+                if (isInertiaV2()) {
+                    progress.finish()
+                }
+            })
     })
 }