Update UX for quick order list mobile view: show loading spinner, hid…

…e remove all if there are no variants in the cart (#3733)

assets/quick-order-list.css

@@ -219,6 +219,10 @@ quick-order-list .pagination-wrapper {
     height: 1.5rem;
   }
 
+  .quick-order-list-total__column.large-up-hide .loading__spinner {
+    margin-top: 2.5rem;
+  }
+
   quick-order-list-remove-all-button {
     margin-left: -1.5rem;
     margin-top: 1rem;
@@ -543,6 +547,16 @@ quick-order-list .pagination-wrapper {
   }
 }
 
+.quick-order-list-total__column.large-up-hide .variant-remove-total {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+
+  .loading__spinner {
+    margin-top: 1.5rem;
+  }
+}
+
 .quick-order-list__total-items {
   display: flex;
   align-items: center;

assets/quick-order-list.js

@@ -432,7 +432,9 @@ if (!customElements.get('quick-order-list')) {
 
       toggleLoading(loading, target = this) {
         target.querySelector('#shopping-cart-variant-item-status').toggleAttribute('aria-hidden', !loading);
-        target.querySelector('.variant-remove-total .loading__spinner')?.classList.toggle('hidden', !loading);
+        target
+          .querySelectorAll('.variant-remove-total .loading__spinner')
+          ?.forEach((spinner) => spinner.classList.toggle('hidden', !loading));
       }
     }
   );

snippets/quick-order-list.liquid

@@ -233,7 +233,7 @@
               <div class="variant-remove-total">
                 {%- render 'loading-spinner' -%}
                 <quick-order-list-remove-all-button
-                  class="no-js-hidden"
+                  class="{% if items_in_cart == 0 %}hidden{% endif %}"
                   data-action="confirm"
                 >
                   <button class="button button--tertiary" type="button">