Laravel + inertia js + react progress bar setup

1) First, disable Inertia's default loading indicator. In app.jsx

createInertiaApp({

    progress: false,

    resolve: name => {

        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })

        return pages[`./Pages/${name}.jsx`]

    },

    setup({ el, App, props }) {

        createRoot(el).render(<App {...props} />)

    },

})

 2) Next, install the NProgress library. 

npm install nprogress

3) add below link to app.blade.php

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />

4) Your app.jsx

import './bootstrap';

import { createInertiaApp } from '@inertiajs/react'

import { createRoot } from 'react-dom/client'

import NProgress from 'nprogress' //for 4th step

import { router } from '@inertiajs/react' //for 4th step

createInertiaApp({

    progress: false, //for 1st step

    resolve: name => {

        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })

        return pages[`./Pages/${name}.jsx`]

    },

    setup({ el, App, props }) {

        createRoot(el).render(<App {...props} />)

    },

})

router.on('start', () => NProgress.start()) //for 4th step

router.on('finish', () => NProgress.done()) //for 4th step