Merge pull request #78 from SAP/busy-indicator

[UI] Busy Indicator
SAP · Jan 8, 2020 · 9a3a8b9 · 9a3a8b9
2 parents 8955ab3 + 92643e1
commit 9a3a8b9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
@@ -34,7 +34,7 @@ module.exports = {
   ],
   coverageThreshold: {
     "global": {
-      "branches": 87,
+      "branches": 86.87,
       "functions": 98,
       "lines": 94,
       "statements": 94

diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.2",
+    "vue-loading-overlay": "^3.2.0",
     "lodash": "^4.17.15",
     "vue": "^2.6.10",
     "core-js": "2.6.6",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,7 +1,12 @@
 <template>
-  <div id="app" class="d-flex flex-column yeoman-ui">
-    <div v-if="!prompts.length" class="loading">{{ messages.generators_loading }}</div>
-
+  <div id="app" class="d-flex flex-column yeoman-ui vld-parent">
+    <loading :active.sync="isLoading"
+             :is-full-page="true"
+             :height="128"
+             :width="128"
+             :color="isLoadingColor"
+             loader="dots">
+    </loading>
     <Header
       v-if="prompts.length"
       :selectedGeneratorHeader="selectedGeneratorHeader"
@@ -50,6 +55,7 @@
 
 <script>
 import Vue from "vue"
+import Loading from 'vue-loading-overlay';
 import Header from "./components/Header.vue"
 import Navigation from "./components/Navigation.vue"
 import Step from "./components/Step.vue"
@@ -67,7 +73,8 @@ export default {
     Header,
     Navigation,
     Step,
-    Done
+    Done,
+    Loading
   },
   data() {
     return {
@@ -87,6 +94,13 @@ export default {
     }
   },
   computed: {
+    isLoading() {
+      return !this.prompts.length || (this.currentPrompt.status === 'pending' && !this.isDone)
+    },
+    isLoadingColor() {
+      const propertyValue = getComputedStyle(document.documentElement).getPropertyValue("--vscode-progressBar-background");
+      return propertyValue ? propertyValue : "#0e70c0"
+    },
     selectedGeneratorHeader() {
       return this.messages.selected_generator + this.generatorName
     },
@@ -316,6 +330,7 @@ export default {
 </script>
 
 <style>
+@import './../node_modules/vue-loading-overlay/dist/vue-loading.css';
 #app {
   height: 100%;
   color: var(--vscode-foreground, #cccccc);