In my personal experience, here is how I resolved a similar situation:

I implemented a global "loading" state in my application using Vuex, allowing any component to access it. However, you can customize this feature using any method that suits your needs.

The simplified solution operates as follows:

function componentLoader(store, fn) {
  return () => {
    // (Vuex) Initiates loading
    store.commit('LOADING_BAR_TASK_BEGIN');

    // (Vuex) Fires when loading is complete
    const done = () => store.commit('LOADING_BAR_TASK_END');

    const promise = fn();
    promise.then(done, done);
    return promise;
  };
}

function createRoutes(store) {
  const load = fn => componentLoader(store, fn);

  return [
    {
      path: '/foo',
      component: load(() => import('./components/foo.vue')),
    },
    {
      path: '/bar',
      component: load(() => import('./components/bar.vue')),
    },
  ];
}

By wrapping each () => import() with the load() function I created, I am able to efficiently manage the loading state. This approach directly monitors the promise instead of relying on router-specific hooks for loading determinations.

If you're working on a Vue.js project and need to implement global routing, you can utilize the following code snippet:

const router = new Router({
  routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about', name: 'about', component: About }
  ]
})

router.beforeResolve((to, from, next) => {
  // Check if it's not the initial page load.
  if (to.name) {
      // Display the route progress bar.
      NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Complete the animation of the route progress bar.
  NProgress.done()
})

If you want to display a loading indicator in one place for all pages, including nested ones, the accepted answer provides an excellent solution.

However, if you're searching for a way to wait for RouterView to finish with lazy loading components and show a loading indicator, here's some code you can use:

<script setup lang="ts">
import Spinner from '@lib/components/spinner/Spinner.vue';
import { routerViewWithSuspenseService } from './router-view-with-suspense';

routerViewWithSuspenseService.register();
const { isCurrentIndexLoading } = routerViewWithSuspenseService.use();
</script>

<template>
    <template v-if="isCurrentIndexLoading">
        <slot>
            <div class="grid size-full place-items-center">
                <Spinner class="size-10"></Spinner>
            </div>
        </slot>
    </template>
    <RouterView v-else></RouterView>
</template>

import { useTimeoutFn } from '@vueuse/core';
import { computed, shallowRef } from 'vue';
import { onBeforeRouteLeave, useRouter } from 'vue-router';

function createRouterViewWithSuspenseService() {
    const registered = shallowRef(false);
    const index = shallowRef(0);
    const isLoading = shallowRef(false);
    const { start, stop } = useTimeoutFn(() => (isLoading.value = true), 100, { immediate: false });

    function register() {
        if (registered.value) {
            return;
        }

        registered.value = true;

        const router = useRouter();

        router.beforeEach(() => {
            start();
        });

        router.afterEach(() => {
            stop();
            isLoading.value = false;
        });
    }

    function use() {
        index.value += 1;
        const currentIndex = index.value;

        onBeforeRouteLeave(() => {
            index.value -= 1;
        });

        return {
            isCurrentIndexLoading: computed(() => currentIndex === index.value && isLoading.value),
        };
    }

    return {
        register,
        use,
    };
}

export const routerViewWithSuspenseService = createRouterViewWithSuspenseService();

I've substituted all RouterView code with RouterViewWithSuspense, allowing the loading indicator to be displayed.

Hopefully, this saves someone a lot of headaches! :D

P.S. I'm still uncertain why the native Suspense doesn't work effectively with dynamic components used alongside vue-router.

The answer provided includes JSFiddle links that are not functional due to the use of @latest (which loads Vue 3) instead of Vue 2's API. I have corrected these links:

• NProgress + Vue 2 + Vue-Router 3: https://jsfiddle.net/8f32yrL9
• NProgress + Vue 3 + Vue-Router 4: https://jsfiddle.net/8f32yrL9/1

A key difference is the router definition now needs a history option as Vue-Router 3 automatically selected the most suitable one, whereas Vue-Router 4 requires explicit declaration. Additionally, I have included a scroll behavior function as it is not clearly documented that a Promise/Resolve is needed when using lazy loading, which may be why many users visit this page. The createRouter API is a new feature in Vue-Router 4 to align with the changes in the new Vue 3 createApp API.

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
  scrollBehavior: function () {
    return new Promise((resolve) => {
      resolve({ left: 0, top: 0 });
    });
  }
});

Apart from these changes, the mounting process remains consistent with the new API.

const app = Vue.createApp();
app.use(router);
app.mount('#app');