conditionally load EventBrite `<iframe>` embed at desktop breakpoints

[thescientist13]

Summary

As part of the EventBrite integration in AnalogStudiosRI/www.blissfestri.com#73 , based on a mobile / tablet breakpoint vs a >= desktop breaking, we either show a button to load a modal, or directly embed the checkout on the page. However, we are just loading both at the same no matter what, so ideally it would be great to only load the <iframe> widget code only if on a desktop browser, since we don't have want to have load a an entire <iframe> embed if we don't have to.

Details

Currently we just load both widgets, and would be good to find a way to conditionally load the

<script>
  globalThis.document.addEventListener('DOMContentLoaded', () => {
    globalThis.EBWidgets.createWidget({
      widgetType: 'checkout',
      eventId: '631211098387',
      modal: true,
      modalTriggerElementId: 'eventbrite-widget-modal-trigger-631211098387'
    });

    // TODO would be great if this could be conditionally loaded based on breakpoint
    globalThis.EBWidgets.createWidget({
       // Required
       widgetType: 'checkout',
       eventId: '631211098387',
       iframeContainerId: 'eventbrite-widget-container-631211098387',

       // Optional
       iframeContainerHeight: 700,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
     });
  });
</script>

Maybe we could use a MutationObserver against the target element, which we're controlling via Tailwind breakpoint classes?

<div
  id="eventbrite-widget-container-631211098387"
  class="hidden lg:inline-block w-1/3 float-right -mt-72 mr-24"
></div>

[thescientist13]

Maybe we could use some sort of resize observer to conditionally load the right integration based on breakpoint and align with Tailwind values so the styles stay in sync with the behavior of the UI.

We can load both if needed, and then only make sure it has been loaded once per.