Admin - Router loading overlay

[satkunas]

Description

Displays a loading overlay on top of the page when the route has changed and while it is being loaded.

Impacts

Another spinner

Delete branch after merge

YES

[extrafu]

@cgx and @satkunas do we keep that as a v10.1 item? If so, we need to get it in today.

[satkunas]

@extrafu this just a nice-to-have. With the recent update of bootstrap-vue I'd like to rework this PR to utilize the new overlay component and deprecate the 3rd party vue-loading-overlay. It can wait.

[extrafu]

Ok then, I'm moving it to v10.2.

[extrafu]

@cgx and @satkunas do we want that in v10.2? if so, what needs to be done? if nothing, just merge it!

[extrafu]

@cgx Please review and if all is fine merge.

[cgx]

My initial tests show that I'm stuck with the overlay on some circumstances. I'll need to do more testing.

[satkunas]

@cgx this may be due to the router fail chain. See if my other work on the ACL route failover helps fix this: ceb1a7154f4615cba0fc7b6ef6d18cdeb4d22d7f

[julsemaan]

will be for the next release, too tight for this one

[cgx]

I still experience timing issues so the loader stays visible even though the routing is completed. Investigation required.

[julsemaan]

@satkunas, is still relevant with the rework of the admin?

[satkunas]

@julsemaan let it rot past v11.1. I'll revsist post-release and update this PR. It's only a nice-to-have and there's nothing mandatory in it.

[satkunas]

Note to self

npm install vue-loading-overlay@^3.0

diff --git a/html/pfappserver/root/README.md b/html/pfappserver/root/README.md
index 71f614273b..26812c1381 100644
--- a/html/pfappserver/root/README.md
+++ b/html/pfappserver/root/README.md
@@ -58,6 +58,7 @@ Since this is a SPA (Single-Page Application), it is currently accessible from `
 * [typeface-b612-mono](https://www.npmjs.com/package/typeface-b612-mono) -- small fonts
 * [mime-type](https://github.com/jshttp/mime-types) -- mime/content-type
 * [yup](https://github.com/jquense/yup) -- validation schema
+* [vue-loading-overlay](https://github.com/ankurk91/vue-loading-overlay) -- loading overlay
 
 ## Files Structure
 
diff --git a/html/pfappserver/root/package.json b/html/pfappserver/root/package.json
index e84c8a4411..7353ecc2a7 100644
--- a/html/pfappserver/root/package.json
+++ b/html/pfappserver/root/package.json
@@ -32,6 +32,7 @@
     "vue-browser-acl": "^0.15.4",
     "vue-flatpickr-component": "8.1.7",
     "vue-i18n": "^8.27.2",
+    "vue-loading-overlay": "^3.4.2",
     "vue-multiselect": "2.1.6",
     "vue-router": "3.5.4",
     "vue-scrollto": "2.20.0",
diff --git a/html/pfappserver/root/src/router/index.js b/html/pfappserver/root/src/router/index.js
index e082f28021..64e699c3be 100644
--- a/html/pfappserver/root/src/router/index.js
+++ b/html/pfappserver/root/src/router/index.js
@@ -1,5 +1,7 @@
 import Vue from 'vue'
-import { computed } from '@vue/composition-api'
+import Loading from 'vue-loading-overlay'
+import 'vue-loading-overlay/dist/vue-loading.css'
+import { computed, nextTick } from '@vue/composition-api'
 import Router from 'vue-router'
 import store from '@/store'
 import axios from 'axios'
@@ -15,6 +17,28 @@ import ConfiguratorRoute from '@/views/Configurator/_router'
 import PreferencesRoute from '@/views/Preferences/_router'
 import ResetRoute from '@/views/Reset/_router'
 
+Vue.use(Loading)
+
+let loader = null
+const hideLoader = () => {
+  if (loader) {
+    nextTick(() => {
+      loader.hide()
+      loader = null
+    })
+  }
+}
+const showLoader = () => {
+  hideLoader()
+  loader = Vue.$loading.show({
+    loader: 'dots',
+    color: 'var(--primary)',
+    backgroundColor: 'var(--white)',
+    width: 64,
+    height: 64
+  })
+}
+
 Vue.use(Router)
 
 const DefaultRoute = {
@@ -39,6 +63,9 @@ let router = new Router({
 })
 
 router.beforeEach((to, from, next) => {
+  if (to.name) {
+    showLoader()
+  }
   /**
   * 1. Check if a matching route defines a transition delay
   * 2. Hide the document scrollbar during the transition (see bootstrap/scss/_modal.scss)
@@ -101,7 +128,10 @@ router.afterEach((to, from) => {
     setTimeout(() => {
       document.body.classList.remove('modal-open') // [2]
       window.scrollTo(0, 0) // [3]
+      hideLoader()
     }, transitionRoute.meta.transitionDelay)
+  } else {
+    hideLoader()
   }
   /**
    * Fetch data required for ALL authenticated pages