Remove Stock Spinner Wheel Background

When adding or removing products, while in the cart page, using the quantity inputs, there appeared a pesky spinner-wheel with an even more annoying grey overlay background, which I couldn’t style for many a days. I desperately wanted to get rid of it. Eventually I wrote a piece of code to log the briefly appearing elements and extracted class names from there. I kept the spinner-wheel, as it looked decent after getting rid of the grey overlay. The CSS alone is used to disable the grey overlay, while the provided Javascript code is for you to be able to console.log your own elements on your site, which appear and disappear too quickly to actually get their class name. Please note that such jumbled up class names are seemingly assigned randomly by squarespace, as a result, after some time you will have to run the code again and change the CSS, because the class names will change. I haven’t found a better solution yet, will update this post when I do. 

HTML:

JAVASCRIPT:

<!--LOG NEW ELEMENTS-->
<script>
// Ensure the DOM is fully loaded before setting up the observer
document.addEventListener('DOMContentLoaded', (event) => {
  // Create a callback function to execute when mutations are observed
  const callback = (mutationsList, observer) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        // Loop through the added nodes
        mutation.addedNodes.forEach(node => {
          // Check if the node is an element (not a text node, etc.)
          if (node.nodeType === Node.ELEMENT_NODE) {
            console.log(`New element added: ID = ${node.id}, Class = ${node.className}`);
          }
        });
      }
    }
  };

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback);

  // Start observing the document body for configured mutations
  const targetNode = document.body;
  if (targetNode) {
    observer.observe(targetNode, { childList: true, subtree: true });
  } else {
    console.error('Target node for MutationObserver is not available.');
  }

  // Optionally, you can disconnect the observer when you no longer need it
  // observer.disconnect();
});
</script>

CSS:

//spinner wheel background
.IxjCAUd2hJFV_2zxKcW9, .tTLeCwDAKFm1AX2fwAaS, .pFXZ5G2whUcWOosr649g {
  background: transparent !important;
}

Note that the JS included is only for you to log your own elements which are too fleeting for inspection. The CSS classes may differ on your website.