Sprint/2021 08

src/components/Loader/LoadingSpinner.vue

 <template>
-  <Loading
-    id="LoadingSpinner"
-    :active.sync="isWaitingForResponse"
-    :can-cancel="false"
-    :height="128"
-    :width="128"
-    :z-index="1500"
-    :color="color"
-    :is-full-page="true"
-  >
-    <template v-if="textBefore !== ''" v-slot:before>
-      <h4>{{ textBefore }}</h4>
+  <b-overlay 
+    id="overlay-background"
+    no-wrap 
+    :fixed="true" 
+    :show="isWaitingForResponse" 
+    :variant="'white'"
+    :opacity="0.65"
+    :z-index="2000"
+    :blur="''"
+    rounded="sm" >
+    <template #overlay>
+      <div class="text-center">
+        <h5>{{ textBefore }}</h5>
+        <b-spinner
+          label="Loading ..."
+          class="b-spinner-opts"
+          :style="{color: color}" >
+        </b-spinner>
+        <h5>{{ textAfter }}</h5>
+      </div>
     </template>
-    <template v-if="textAfter !== ''" v-slot:after>
-      <h4>{{ textAfter }}</h4>
-    </template>
-  </Loading>
+  </b-overlay>
 </template>
 
+
 <script lang="ts">
-import Loading from 'vue-loading-overlay';
-import 'vue-loading-overlay/dist/vue-loading.css';
+import { BOverlay, BSpinner } from "bootstrap-vue";
 
 export default {
-  name: 'LoadingSpinner',
+  name: "LoadingSpinner",
   components: {
-    Loading,
+    BOverlay,
+    BSpinner,
   },
   props: {
     color: {
-      default: '#00549f',
+      default: "#00549f",
       type: String,
     },
     isWaitingForResponse: {
@@ -37,31 +43,25 @@ export default {
       type: Boolean,
     },
     textBefore: {
-      default: '',
+      default: "",
       type: String,
     },
     textAfter: {
-      default: '',
+      default: "",
       type: String,
     },
+    data() {
+      return {
+        show: false,
+      };
+    },
   },
 };
 </script>
 
 <style>
-.vld-icon {
-  width: 100%;
-}
-.vld-icon svg {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-.vld-icon h4 {
-  text-align: center;
-  max-width: 500px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 1em;
+.b-spinner-opts {
+  height: 8rem;
+  width: 8rem;
 }
 </style>