[Core] [UI] Add page loading progress

core/datacap-ui/package.json

@@ -37,6 +37,7 @@
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.356.0",
     "md-editor-v3": "^4.12.1",
+    "nprogress": "^0.2.0",
     "radix-vue": "^1.5.2",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
@@ -58,6 +59,7 @@
   "devDependencies": {
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.26",
+    "@types/nprogress": "^0.2.3",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.18",

core/datacap-ui/src/router/index.ts

@@ -2,6 +2,16 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import { createAuthRoute } from '@/router/auth'
 import { createDefaultRouter } from '@/router/default'
 import { createHttpRoute } from '@/router/http'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({
+    easing: 'ease',
+    speed: 600,
+    showSpinner: true,
+    trickleSpeed: 200,
+    minimum: 0.3
+})
 
 const routes: Array<RouteRecordRaw> = []
 
@@ -15,6 +25,7 @@ createAuthRoute(router)
 createDefaultRouter(router)
 
 router.beforeEach((_to, _from, _next) => {
+    NProgress.start()
     if (_to.matched.length === 0) {
         _next('/common/404')
     }
@@ -23,4 +34,6 @@ router.beforeEach((_to, _from, _next) => {
     }
 })
 
+router.afterEach(() => NProgress.done())
+
 export default router

core/datacap-ui/src/views/ui/carousel/carousel.vue

@@ -4,7 +4,7 @@
       <CarouselItem v-for="item in items">
         <div v-if="item.isAlert">
           <DcLink :external="item.external" :link="item.link">
-            <Alert :title="item.title"/>
+            <Alert :title="item.title" class="rounded-none"/>
           </DcLink>
         </div>
         <div v-else>