Add NProgress to show some progress when loading the main content area

[ywarnier]

The browser tab spinner only fires on real HTTP navigations, not client-side JavaScript route changes. Chamilo already uses cursor-wait on the body during route transitions, but that doesn't help with the tab.

A good fix is NProgress (or equivalent): a thin progress bar at the top of the page that also signals the browser tab.

The cleanest solution for an existing Vue app is NProgress hooked into the router guards that are already in place:

1. Install NProgress:
   yarn add nprogress

2. Hook it into the router: the router already has beforeEach and afterEach in assets/vue/router/index.js.

Add NProgress calls there:

  import NProgress from "nprogress"
  import "nprogress/nprogress.css"

  router.beforeEach(async (to, from, next) => {
    NProgress.start()
    document.body.classList.add("cursor-wait")
    // ... existing logic
  })
   
  router.afterEach(() => {
    NProgress.done()
    document.body.classList.remove("cursor-wait")
  })

However, NProgress does not trigger the browser tab spinner. That spinner is controlled by the browser's navigation lifecycle (beforeunload, actual network requests for new documents) and cannot be triggered programmatically by JavaScript in a SPA. This is a fundamental browser security boundary.

What can be done in general:

│ Approach │ What it gives you │
|-------|-------|
│ NProgress bar │ Visible progress bar at top of page │
│ document.title change │ Add a ⏳ prefix to the tab title while loading │
│ Custom favicon swap │ Replace favicon with an animated spinner SVG during load │

The document.title trick is the simplest way to signal loading in the tab itself:

  router.beforeEach(async (to, from, next) => {
    document.title = "⏳ Loading..."
    // ...
  })
  
  router.afterEach((to) => {
    document.title = "Chamilo" // or derive from route meta
    // ...
  })