spinner to loading

resources/css/spinner.css

@@ -39,25 +39,40 @@
     height: 100% !important;
     justify-items: center;
     align-items: center;
-    /* background-color: rgb(30 41 59 / 0.5); */
-    background-color: white !important;
+    background-color: rgb(30 41 59 / 0.5);
+    /* background-color: white !important; */
 }
 
-#nprogress .spinner-icon {
+#nprogress .spinner-bg {
     margin: auto;
-    width: 80px !important;
-    height: 80px !important;
+    width: 140px !important;
+    height: 60px !important;
+    padding: 0.5rem;
+    background-color: white;
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    align-items: center;
+    font-weight: bold;
+    font-size: large;
+}
+
+#nprogress .spinner-icon {
+    /* margin: auto; */
+    width: 40px !important;
+    height: 40px !important;
     box-sizing: border-box;
 
-    border: solid 6px transparent !important;
+    border: solid 3px transparent !important;
     border-top-color: #F1A410 !important;
     border-left-color: #F1A410 !important;
-    border-radius: 50%;
+    border-radius: 50px !important;
 
     -webkit-animation: nprogress-spinner 400ms linear infinite;
     animation: nprogress-spinner 400ms linear infinite;
 }
 
+
 .nprogress-custom-parent {
     display: flex;
     align-items: center;

resources/js/app.jsx

@@ -5,6 +5,7 @@ import 'flowbite'
 import 'react-toastify/dist/ReactToastify.css'
 
 import React from 'react'
+import NProgress from 'nprogress'
 import { createRoot } from 'react-dom/client'
 import { createInertiaApp, router } from '@inertiajs/react'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
@@ -26,3 +27,34 @@ createInertiaApp({
     },
     progress: { color: '#F1A410', showSpinner: true, includeCSS: true },
 })
+
+let timeout = null
+
+NProgress.configure({
+    template:
+        '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-bg"><div class="spinner-icon"></div><div>Loading</div></div></div>',
+})
+
+router.on('start', () => {
+    timeout = setTimeout(() => NProgress.start(), 250)
+})
+
+router.on('progress', (event) => {
+    if (NProgress.isStarted() && event.detail.progress.percentage) {
+        NProgress.set((event.detail.progress.percentage / 100) * 0.9)
+    }
+})
+
+router.on('finish', (event) => {
+    clearTimeout(timeout)
+    if (!NProgress.isStarted()) {
+        return
+    } else if (event.detail.visit.completed) {
+        NProgress.done()
+    } else if (event.detail.visit.interrupted) {
+        NProgress.set(0)
+    } else if (event.detail.visit.cancelled) {
+        NProgress.done()
+        NProgress.remove()
+    }
+})