Error rendering component

Could not render component '@header--maui-jim--empty-cart' - component not found.

{{render '@homepage--maui-jim--image'}}
<div class="js-spinning js-interstitial">
  {{render '@icons--spinner'}}
</div>
{
  "bodyClasses": [
    "js-interstitial-open"
  ]
}
  • Content:
    (function () {
      const body = document.body;
      const interstitial = document.querySelector('.js-interstitial');
    
      if (typeof componentEvents !== 'undefined' && interstitial) {
        componentEvents.on('show-interstitial', showInterstitial);
        componentEvents.on('hide-interstitial', hideInterstitial);
      }
    
      function showInterstitial() {
        body.dataset.previousScrollTop = (document.documentElement.scrollTop || body.scrollTop);
        body.style.top = (-1 * body.dataset.previousScrollTop) + 'px';
        body.classList.add('js-interstitial-open');
      }
    
      function hideInterstitial() {
        body.classList.remove('js-interstitial-open');
        document.documentElement.scrollTop = body.scrollTop = body.dataset.previousScrollTop;
        body.style.top = '';
        delete body.dataset.previousScrollTop;
      }
    })();
    
  • URL: /components/raw/interstitial-demo/interstitial.js
  • Filesystem Path: src/components/03-pages/interstitial/interstitial.js
  • Size: 804 Bytes
  • Content:
    // .js-interstitial is intended for use in conjunction with .js-spinning. When
    // both classes are applied to the body element and a spinner component is
    // added to the body, the spinner’s overlay will cover everything.
    .js-spinning.js-interstitial {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 50;
    
      .icon--spinner {
        z-index: 50;
      }
    
      .js-interstitial-open & {
        display: block;
      }
    }
    
    .js-interstitial-open {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
  • URL: /components/raw/interstitial-demo/interstitial.scss
  • Filesystem Path: src/components/03-pages/interstitial/interstitial.scss
  • Size: 544 Bytes

The interstitial component uses the spinner component in conjunction with additional styles and JavaScript to prevent activity on the page while critical operations are undergoing. Use this feature sparingly and with caution.

Required HTML

You’ll need to add the following HTML near the bottom of the body element.

<div class="js-spinning js-interstitial">
  <svg class="icon icon--spinner">
    <use xlink:href="/assets/icons/icons.svg#spinner"></use>
  </svg>
</div>

Usage

You can show and hide the interstitial using two custom JavaScript events.

To show the interstitial, use this:

if (typeof componentEvents !== 'undefined') {
  componentEvents.emitEvent('show-interstitial');
}

To hide the interstitial, use this:

if (typeof componentEvents !== 'undefined') {
  componentEvents.emitEvent('hide-interstitial');
}