From 87ead214dd9bad2451c7986e17dc6f76a785a39a Mon Sep 17 00:00:00 2001
From: Erastus Amunwe <eneamunwe@gmail.com>
Date: Tue, 3 Nov 2020 21:05:56 +0200
Subject: [PATCH] Add and Test the overlay loading div in app.vue

---
 src/App.vue | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2b099b0..647699d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
 <div >
-  <!-- <div class="uk-overlay-default uk-position-cover">
+  <!-- <div v-if="loading" class="uk-overlay-default uk-position-cover">
     <div class="uk-position-center">
         <h1>Loading... Please wait...</h1>
     </div>
@@ -9,8 +9,14 @@
   <div class="uk-container ">
     <selections/>
     <div class="uk-container uk-container-small">
-
+      <verses/>
     <options/>
+
+    </div>
+  </div>
+  <div v-if="loading" id="overlay">
+    <div  class="uk-position-center less-opacity">
+        <h1>Loading... Please wait.</h1>
     </div>
   </div>
 </div>
@@ -22,10 +28,12 @@
 
 import UIkit from 'uikit';
 import Icons from 'uikit/dist/js/uikit-icons';
+import {mapGetters} from 'vuex';
 
 import navbar from './components/NavBar.vue';
 import options from './components/Options.vue';
 import Selections from  './components/Selection.vue'
+import Verses from './components/Verses.vue'
 
 UIkit.use(Icons);
  
@@ -35,6 +43,10 @@ export default {
     navbar,
     options,
     Selections,
+    Verses,
+  },
+  computed: {
+    ...mapGetters(['loading'])
   },
   created(){
     
@@ -61,4 +73,20 @@ export default {
 .disabled:hover {
   color:gray 
 }
+#overlay {
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,0.7);
+  z-index: 20000;
+  cursor: pointer;
+}
+.less-opacity{
+  background-color: rgba(255,255,255,0.7);
+}
 </style>