app/ayanova/src/main.js

@@ -12,27 +12,74 @@ Vue.config.productionTip = false;
 Vue.config.errorHandler = errorHandler.handleVueError;
 window.onerror = errorHandler.handleGeneralError;
 
-//Loading indicator
+//Loading indicator on route change, probably don't need this
+//but do need one for ajax calls
 
-router.beforeResolve((to, from, next) => {
+// router.beforeResolve((to, from, next) => {
-  // If this isn't an initial page load.
+//   // If this isn't an initial page load.
-  from;
+//   from;
-  if (to.name) {
+//   if (to.name) {
-    // Start the route progress bar.
+//     // Start the route progress bar.
-    //NProgress.start()
+//     //NProgress.start()
-    // eslint-disable-next-line
+//     // eslint-disable-next-line
-    console.log("---===LOADING===---");
+//     console.log("---===LOADING===---");
-  }
+//   }
-  next();
+//   next();
+// });
+
+// router.afterEach((to, from) => {
+//   // Complete the animation of the route progress bar.
+//   //NProgress.done()
+//   to;
+//   from;
+//   // eslint-disable-next-line
+//   console.log("---===FINISHED LOADING===---");
+// });
+
+// Store a copy of the fetch function
+var _oldFetch = fetch;
+
+// Create our new version of the fetch function
+window.fetch = function() {
+  // Create hooks
+  var fetchStart = new Event("fetchStart", {
+    view: document,
+    bubbles: true,
+    cancelable: false
+  });
+  var fetchEnd = new Event("fetchEnd", {
+    view: document,
+    bubbles: true,
+    cancelable: false
+  });
+
+  // Pass the supplied arguments to the real fetch function
+  var fetchCall = _oldFetch.apply(this, arguments);
+
+  // Trigger the fetchStart event
+  document.dispatchEvent(fetchStart);
+
+  fetchCall
+    .then(function() {
+      // Trigger the fetchEnd event
+      document.dispatchEvent(fetchEnd);
+    })
+    .catch(function() {
+      // Trigger the fetchEnd event
+      document.dispatchEvent(fetchEnd);
+    });
+
+  return fetchCall;
+};
+
+document.addEventListener("fetchStart", function() {
+  // eslint-disable-next-line
+  console.log("Show spinner");
 });
 
-router.afterEach((to, from) => {
+document.addEventListener("fetchEnd", function() {
-  // Complete the animation of the route progress bar.
-  //NProgress.done()
-  to;
-  from;
   // eslint-disable-next-line
-  console.log("---===FINISHED LOADING===---");
+  console.log("Hide spinner");
 });
 
 new Vue({