Add loading spinner when loading in cart and order list

src/assets/scss/_my-account-my-orders.scss

@@ -15,6 +15,12 @@
   border: 1px solid $alto;
   padding: 20px;
 }
+
+.order-list-spinner {
+  text-align: center;
+  padding-top: 80px;
+}
+
 .my-orders-title {
   text-transform: uppercase;
   font-size: 18px;

src/assets/scss/_pop.scss

@@ -65,6 +65,11 @@
   word-spacing: 0.1em;
 }
 
+.cart-loading-spinner {
+  text-align: center;
+  padding: 50px;
+}
+
 #pop-product-list {
 
   @media screen and (min-width: 767px) {

src/components/cartdetail/PageCartDetail.vue

@@ -8,7 +8,7 @@
         <!--{{> checkout/start-checkout-link id="cart-checkoutnow-btn"}}-->
       </div>
     </div>
-    <div v-if="cartNotEmpty">
+    <div v-if="!isLoading && cartNotEmpty">
       <div class="row">
         <div class="col-sm-12">
           <div class="current-in-bag">
@@ -54,11 +54,11 @@
         </div>
       </div>
     </div>
-    <div v-else
+
+    <div v-else-if="!isLoading && !cartNotEmpty"
          class="empty-results-container">
       <div class="empty-results">
-        <span
-              data-test="empty-cart">
+        <span data-test="empty-cart">
           {{ $t('empty') }}
         </span>
       </div>
@@ -68,6 +68,11 @@
         </router-link>
       </div>
     </div>
+
+    <div v-else
+         class="cart-loading-spinner">
+      <img data-test="spinner" src="../../assets/img/spinner.gif"/>
+    </div>
   </div>
 </template>
 
@@ -92,6 +97,12 @@ export default {
     me: null,
   }),
 
+  computed: {
+    isLoading() {
+      return this.$apollo.loading;
+    },
+  },
+
   mixins: [cartMixin],
 
   apollo: {

src/components/useraccount/myorders/TabOrderList.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="me"
        class="my-orders">
-    <div v-if="me.orders.results.length"
+    <div v-if="!isLoading && me.orders.results.length"
         class="my-orders-content">
       <div class="my-orders-table-wrapper">
         <div class="row">
@@ -76,13 +76,18 @@
       </div>
     </div>
 
-    <div v-else
+    <div v-else-if="!isLoading && !me.orders.results.length"
          data-test="empty-order-list"
          class="empty-results-container">
       <span class="empty-order-list">
         {{ $t('emptyOrders') }}
       </span>
     </div>
+
+    <div v-else
+        class="order-list-spinner">
+      <img data-test="spinner" src="../../../assets/img/spinner.gif"/>
+    </div>
   </div>
 </template>
 
@@ -99,6 +104,12 @@ export default {
     me: null,
   }),
 
+  computed: {
+    isLoading() {
+      return this.$apollo.loading;
+    },
+  },
+
   methods: {
     translateStatus(state) {
       return state ? this.$t(state) : '-';