[ADD] loader component for pos

src/App.vue

@@ -1,24 +1,27 @@
 <template lang="pug">
-    form-wizard(title="" subtitle="" nextButtonText="Continuar" backButtonText="Volver" finishButtonText="Finalizar" color="#7c7bad")
-        tab-content(title="Agregue productos al carrito")
-            .pos
-                .products-container
-                    products-searcher
-                    products-grid(:symbol="currency.symbol")
-                .cart-container
-                    cart-total(:total="total" :symbol="currency.symbol")
-                    cart-items(:symbol="currency.symbol")
-        tab-content(title="Seleccione un cliente")
-            customer-searcher
-            customers-grid
-        tab-content(title="Vea un resumen de su operación")
-            summary-display
+    .app
+        form-wizard(title="" subtitle="" nextButtonText="Continuar" backButtonText="Volver" finishButtonText="Finalizar" color="#7c7bad")
+            tab-content(title="Agregue productos al carrito")
+                .pos
+                    .products-container
+                        products-searcher
+                        products-grid(:symbol="currency.symbol")
+                    .cart-container
+                        cart-total(:total="total" :symbol="currency.symbol")
+                        cart-items(:symbol="currency.symbol")
+            tab-content(title="Seleccione un cliente")
+                customer-searcher
+                customers-grid
+            tab-content(title="Vea un resumen de su operación")
+                summary-display
+        loader
 </template>
 
 <script>
     import { FormWizard, TabContent } from 'vue-form-wizard'
     import 'vue-form-wizard/dist/vue-form-wizard.min.css'
 
+    import Loader from '@/components/Loader'
     import ProductsSearcher from '@/components/ProductsSearcher'
     import ProductsGrid from '@/components/ProductsGrid'
     import CartTotal from '@/components/CartTotal'
@@ -35,6 +38,7 @@
         components: {
             'form-wizard': FormWizard,
             'tab-content': TabContent,
+            'loader': Loader,
             'products-searcher': ProductsSearcher,
             'products-grid': ProductsGrid,
             'cart-total': CartTotal,

src/components/Loader.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+    modal(name="pos-loader" transition="nice-modal-fade")
+        h2 Cargando
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        computed: mapGetters([
+            'isLoaded'
+        ]),
+        watch: {
+            isLoaded(loaded) {
+                if (loaded) {
+                     this.$modal.hide("pos-loader")
+                } else {
+                    this.$modal.show("pos-loader")
+                }
+            }
+        },
+        mounted() {
+            this.$modal.show("pos-loader")
+        }
+    }
+</script>
+
+<style lang="sass">
+
+</style>