[Refactoring] Replace loading spinner with snippet (#2996)

* Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag
Shopify · Oct 11, 2023 · d50698b · d50698b
1 parent 000a469
commit d50698b
Show file tree

Hide file tree

Showing 33 changed files with 527 additions and 501 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1373,7 +1373,7 @@ button.shopify-payment-button__button--unbranded {
   }
 }
 
-.button.loading > .loading-overlay__spinner {
+.button.loading > .loading__spinner {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -1383,11 +1383,11 @@ button.shopify-payment-button__button--unbranded {
   align-items: center;
 }
 
-.button.loading > .loading-overlay__spinner .spinner {
+.button.loading > .loading__spinner .spinner {
   width: fit-content;
 }
 
-.button.loading > .loading-overlay__spinner .path {
+.button.loading > .loading__spinner .path {
   stroke: rgb(var(--color-button-text));
 }
 
@@ -2021,8 +2021,8 @@ input[type='checkbox'] {
   position: relative;
 }
 
-product-info .loading-overlay:not(.hidden) ~ *,
-.quantity__rules-cart .loading-overlay:not(.hidden) ~ * {
+product-info .loading__spinner:not(.hidden) ~ *,
+.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
   visibility: hidden;
 }
 

diff --git a/assets/cart.js b/assets/cart.js
@@ -170,7 +170,7 @@ class CartItems extends HTMLElement {
         publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId });
       })
       .catch(() => {
-        this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
         const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');
         errors.textContent = window.cartStrings.error;
       })
@@ -203,8 +203,8 @@ class CartItems extends HTMLElement {
     const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
     mainCartItems.classList.add('cart__items--disabled');
 
-    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
-    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
 
     [...cartItemElements, ...cartDrawerItemElements].forEach((overlay) => overlay.classList.remove('hidden'));
 
@@ -216,8 +216,8 @@ class CartItems extends HTMLElement {
     const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
     mainCartItems.classList.remove('cart__items--disabled');
 
-    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
-    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
 
     cartItemElements.forEach((overlay) => overlay.classList.add('hidden'));
     cartDrawerItemElements.forEach((overlay) => overlay.classList.add('hidden'));

diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css
@@ -254,7 +254,7 @@ cart-drawer-items {
   margin-bottom: 1.5rem;
 }
 
-.cart-drawer .cart-item .loading-overlay {
+.cart-drawer .cart-item .loading__spinner {
   right: 5px;
   padding-top: 2.5rem;
 }

diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
@@ -151,7 +151,7 @@ cart-remove-button .icon-remove {
   width: 1.5rem;
 }
 
-.cart-item .loading-overlay {
+.cart-item .loading__spinner {
   top: 0;
   left: auto;
   right: auto;
@@ -160,14 +160,14 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 750px) {
-  .cart-item .loading-overlay {
+  .cart-item .loading__spinner {
     right: 0;
     padding-top: 4.5rem;
     bottom: auto;
   }
 }
 
-.cart-item .loading-overlay:not(.hidden)~* {
+.cart-item .loading__spinner:not(.hidden)~* {
   visibility: hidden;
 }
 

diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -927,24 +927,21 @@ input.mobile-facets__checkbox {
   margin: 0;
 }
 
-.product-count__text.loading {
+#ProductCountDesktop.loading,
+#ProductCount.loading {
   visibility: hidden;
 }
 
-.product-count .loading-overlay__spinner,
-.product-count-vertical .loading-overlay__spinner {
-  display: none;
+.product-count .loading__spinner,
+.product-count-vertical .loading__spinner {
   position: absolute;
+  padding-top: 0.6rem;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1.8rem;
 }
 
-.product-count__text.loading + .loading-overlay__spinner {
-  display: block;
-}
-
 @media screen and (min-width: 750px) {
   .facets-vertical {
     display: flex;
@@ -1009,6 +1006,7 @@ input.mobile-facets__checkbox {
 
   .product-count-vertical {
     margin-left: 3.5rem;
+    position: relative;
   }
 
   .facets-vertical .active-facets__button-wrapper {

diff --git a/assets/component-loading-overlay.css → assets/component-loading-spinner.css b/assets/component-loading-overlay.css → assets/component-loading-spinner.css
@@ -1,35 +1,14 @@
-.loading-overlay {
+.loading__spinner {
   position: absolute;
   z-index: 1;
   width: 1.8rem;
 }
 
-price-per-item .loading-overlay {
-  position: relative;
-}
-
-@media screen and (max-width: 749px) {
-  .loading-overlay {
-    top: 0;
-    right: 0;
-  }
-}
-
-@media screen and (min-width: 750px) {
-  .loading-overlay {
-    left: 0;
-  }
-}
-
-.loading-overlay__spinner {
+.loading__spinner {
   width: 1.8rem;
   display: inline-block;
 }
 
-price-per-item .loading-overlay__spinner {
-  display: flex;
-}
-
 .spinner {
   animation: rotator 1.4s linear infinite;
 }
@@ -71,12 +50,12 @@ price-per-item .loading-overlay__spinner {
   }
 }
 
-.loading-overlay:not(.hidden) + .cart-item__price-wrapper,
-.loading-overlay:not(.hidden) ~ cart-remove-button {
+.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
+.loading__spinner:not(.hidden) ~ cart-remove-button {
   opacity: 50%;
 }
 
-.loading-overlay:not(.hidden) ~ cart-remove-button {
+.loading__spinner:not(.hidden) ~ cart-remove-button {
   pointer-events: none;
   cursor: default;
 }
diff --git a/assets/component-search.css b/assets/component-search.css
@@ -68,3 +68,7 @@
 input::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
+.template-search__results {
+  position: relative;
+}
diff --git a/assets/facets.js b/assets/facets.js
@@ -34,6 +34,8 @@ class FacetFiltersForm extends HTMLElement {
     const sections = FacetFiltersForm.getSections();
     const countContainer = document.getElementById('ProductCount');
     const countContainerDesktop = document.getElementById('ProductCountDesktop');
+    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    loadingSpinners.forEach((spinner) => spinner.classList.remove('hidden'));
     document.getElementById('ProductGridContainer').querySelector('.collection').classList.add('loading');
     if (countContainer) {
       countContainer.classList.add('loading');
@@ -98,6 +100,8 @@ class FacetFiltersForm extends HTMLElement {
       containerDesktop.innerHTML = count;
       containerDesktop.classList.remove('loading');
     }
+    const loadingSpinners = document.querySelectorAll('.facets-container .loading__spinner, facet-filters-form .loading__spinner');
+    loadingSpinners.forEach((spinner) => spinner.classList.add('hidden'));
   }
 
   static renderFilters(html, event) {

diff --git a/assets/magnify.js b/assets/magnify.js
@@ -25,7 +25,7 @@ function prepareOverlay(container, image) {
 }
 
 function toggleLoadingSpinner(image) {
-  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading-overlay__spinner`);
+  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading__spinner`);
   loadingSpinner.classList.toggle('hidden');
 }
 

diff --git a/assets/product-form.js b/assets/product-form.js
@@ -24,7 +24,7 @@ if (!customElements.get('product-form')) {
 
         this.submitButton.setAttribute('aria-disabled', true);
         this.submitButton.classList.add('loading');
-        this.querySelector('.loading-overlay__spinner').classList.remove('hidden');
+        this.querySelector('.loading__spinner').classList.remove('hidden');
 
         const config = fetchConfig('javascript');
         config.headers['X-Requested-With'] = 'XMLHttpRequest';
@@ -95,7 +95,7 @@ if (!customElements.get('product-form')) {
             this.submitButton.classList.remove('loading');
             if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
             if (!this.error) this.submitButton.removeAttribute('aria-disabled');
-            this.querySelector('.loading-overlay__spinner').classList.add('hidden');
+            this.querySelector('.loading__spinner').classList.add('hidden');
           });
       }
 

diff --git a/assets/product-info.js b/assets/product-info.js
@@ -59,7 +59,7 @@ if (!customElements.get('product-info')) {
 
       fetchQuantityRules() {
         if (!this.currentVariant || !this.currentVariant.value) return;
-        this.querySelector('.quantity__rules-cart .loading-overlay').classList.remove('hidden');
+        this.querySelector('.quantity__rules-cart .loading__spinner').classList.remove('hidden');
         fetch(`${this.dataset.url}?variant=${this.currentVariant.value}&section_id=${this.dataset.section}`)
           .then((response) => {
             return response.text();
@@ -73,7 +73,7 @@ if (!customElements.get('product-info')) {
             console.error(e);
           })
           .finally(() => {
-            this.querySelector('.quantity__rules-cart .loading-overlay').classList.add('hidden');
+            this.querySelector('.quantity__rules-cart .loading__spinner').classList.add('hidden');
           });
       }
 

diff --git a/assets/quick-add.js b/assets/quick-add.js
@@ -19,7 +19,7 @@ if (!customElements.get('quick-add-modal')) {
       show(opener) {
         opener.setAttribute('aria-disabled', true);
         opener.classList.add('loading');
-        opener.querySelector('.loading-overlay__spinner').classList.remove('hidden');
+        opener.querySelector('.loading__spinner').classList.remove('hidden');
 
         fetch(opener.getAttribute('data-product-url'))
           .then((response) => response.text())
@@ -44,7 +44,7 @@ if (!customElements.get('quick-add-modal')) {
           .finally(() => {
             opener.removeAttribute('aria-disabled');
             opener.classList.remove('loading');
-            opener.querySelector('.loading-overlay__spinner').classList.add('hidden');
+            opener.querySelector('.loading__spinner').classList.add('hidden');
           });
       }
 

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
@@ -53,7 +53,7 @@ quick-order-list .quantity__button {
     vertical-align: top;
   }
 
-  .variant-item--unit-price .variant-item__totals .loading-overlay {
+  .variant-item--unit-price .variant-item__totals .loading__spinner {
     padding-top: 1.7rem;
   }
 }
@@ -241,7 +241,7 @@ quick-order-list-remove-button .icon-remove {
   transition: transform var(--duration-default) ease;
 }
 
-.variant-item .loading-overlay {
+.variant-item .loading__spinner {
   top: 0;
   left: auto;
   right: 0;
@@ -288,16 +288,16 @@ quick-order-list-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 990px) {
-  .variant-item .loading-overlay {
+  .variant-item .loading__spinner {
     padding-top: 3rem;
     bottom: auto;
   }
 
-  .variant-item .loading-overlay--error {
+  .variant-item .loading__spinner--error {
     padding-top: 5rem;
   }
 
-  .variant-remove-total .loading-overlay {
+  .variant-remove-total .loading__spinner {
     left: 2rem;
     top: 1.2rem;
   }
@@ -312,8 +312,13 @@ quick-order-list-remove-button:hover .icon-remove {
   text-underline-offset: 0.3rem;
 }
 
-.variant-item .loading-overlay:not(.hidden)~*,
-.variant-remove-total .loading-overlay:not(.hidden)~* {
+.variant-remove-total {
+  position: relative;
+  align-self: center;
+}
+
+.variant-item .loading__spinner:not(.hidden)~*,
+.variant-remove-total .loading__spinner:not(.hidden)~* {
   visibility: hidden;
 }
 
@@ -356,7 +361,7 @@ quick-order-list-remove-button:hover .icon-remove {
     align-items: center;
   }
 
-  .variant-item__details .loading-overlay {
+  .variant-item__details .loading__spinner {
     left: 0;
     top: auto;
   }

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
@@ -180,7 +180,7 @@ class QuickOrderList extends HTMLElement {
   }
 
   updateMultipleQty(items) {
-    this.querySelector('.variant-remove-total .loading-overlay').classList.remove('hidden');
+    this.querySelector('.variant-remove-total .loading__spinner').classList.remove('hidden');
 
     const body = JSON.stringify({
       updates: items,
@@ -202,7 +202,7 @@ class QuickOrderList extends HTMLElement {
         this.setErrorMessage(window.cartStrings.error);
       })
       .finally(() => {
-        this.querySelector('.variant-remove-total .loading-overlay').classList.add('hidden');
+        this.querySelector('.variant-remove-total .loading__spinner').classList.add('hidden');
       });
   }
 
@@ -245,8 +245,8 @@ class QuickOrderList extends HTMLElement {
         const items = document.querySelectorAll('.variant-item');
 
         if (parsedState.description || parsedState.errors) {
-          const variantItem = document.querySelector(`[id^="Variant-${id}"] .variant-item__totals.small-hide .loading-overlay`);
-          variantItem.classList.add('loading-overlay--error');
+          const variantItem = document.querySelector(`[id^="Variant-${id}"] .variant-item__totals.small-hide .loading__spinner`);
+          variantItem.classList.add('loading__spinner--error');
           this.resetQuantityInput(id, quantityElement);
           if (parsedState.errors) {
             this.updateLiveRegions(id, parsedState.errors);
@@ -285,7 +285,7 @@ class QuickOrderList extends HTMLElement {
           this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity))
         }
       }).catch((error) => {
-        this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
         this.resetQuantityInput(id);
         console.error(error);
         this.setErrorMessage(window.cartStrings.error);
@@ -375,7 +375,7 @@ class QuickOrderList extends HTMLElement {
 
   toggleLoading(id, enable) {
     const quickOrderList = document.getElementById(this.quickOrderListId);
-    const quickOrderListItems = this.querySelectorAll(`#Variant-${id} .loading-overlay`);
+    const quickOrderListItems = this.querySelectorAll(`#Variant-${id} .loading__spinner`);
 
     if (enable) {
       quickOrderList.classList.add('quick-order-list__container--disabled');

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -1165,7 +1165,7 @@ a.product__text {
   display: none;
 }
 
-.product__modal-opener > .loading-overlay__spinner {
+.product__modal-opener > .loading__spinner {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);