Add app-wide loading mask component

app-starter/WguAppTemplate.vue

@@ -58,6 +58,10 @@
 
     <slot name="wgu-after-footer" />
 
+    <!-- app wide loading mask,
+    use WguEventBus.$emit('app-loading-mask-toggle', newViz) to show/hide -->
+    <wgu-app-loading-mask />
+
     <slot name="wgu-app-end" />
 
   </v-app>
@@ -72,6 +76,7 @@
   import AppFooter from './components/AppFooter'
   import AppSidebar from './components/AppSidebar'
   import AppLogo from '../src/components/AppLogo'
+  import AppLoadingMask from '../src/components/AppLoadingMask'
   import BgLayerSwitcher from '../src/components/bglayerswitcher/BgLayerSwitcher.vue'
   import OverviewMap from '../src/components/overviewmap/OverviewMap.vue'
   import MeasureWin from '../src/components/measuretool/MeasureWin'
@@ -92,6 +97,7 @@
       'wgu-app-footer': AppFooter,
       'wgu-app-sidebar': AppSidebar,
       'wgu-app-logo': AppLogo,
+      'wgu-app-loading-mask': AppLoadingMask,
       'wgu-bglayerswitcher': BgLayerSwitcher,
       'wgu-overviewmap': OverviewMap,
       'wgu-measuretool-win': MeasureWin,

src/components/AppLoadingMask.vue

@@ -0,0 +1,35 @@
+<template>
+
+  <v-overlay :value="show" :opacity="0.25">
+    <v-progress-circular
+      indeterminate
+      color="primary"
+    >
+    </v-progress-circular>
+  </v-overlay>
+
+</template>
+
+<script>
+import { WguEventBus } from '../WguEventBus';
+
+export default {
+  name: 'wgu-app-loading-mask',
+  components: {},
+  data () {
+    return {
+      show: false
+    }
+  },
+  created () {
+    WguEventBus.$on('app-loading-mask-toggle', (visible) => {
+      // toggle or force a visibility of the loading mask
+      if (typeof visible === 'boolean') {
+        this.show = visible;
+      } else {
+        this.show = !this.show;
+      }
+    });
+  }
+}
+</script>

test/unit/specs/components/AppLoadingMask.spec.js

@@ -0,0 +1,36 @@
+import AppLoadingMask from '@/components/AppLoadingMask';
+import { WguEventBus } from '@/WguEventBus';
+import { shallowMount } from '@vue/test-utils';
+
+describe('AppLoadingMask.vue', () => {
+  it('sets the correct default data', () => {
+    AppLoadingMask.$appConfig = {};
+    expect(typeof AppLoadingMask.data).to.equal('function');
+    const data = AppLoadingMask.data();
+    expect(data.show).to.equal(false);
+  });
+
+  describe('events', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      comp = shallowMount(AppLoadingMask, {});
+      vm = comp.vm;
+    });
+
+    it('event "app-loading-mask-toggle" forces correct visibility', done => {
+      // force showing by adding 'true' parameter
+      WguEventBus.$emit('app-loading-mask-toggle', true);
+      vm.$nextTick(() => {
+        expect(vm.show).to.equal(true);
+
+        // toggle visibility by skipping parameter
+        WguEventBus.$emit('app-loading-mask-toggle');
+        vm.$nextTick(() => {
+          expect(vm.show).to.equal(false);
+          done();
+        });
+      });
+    });
+  });
+});