Lazy Load JS groups with IO

sample.js

// Sample from Trellis
import { loadImages } from './helpers/lazyload'

const boot = () => {
  const bodyTag = document.getElementsByTagName('body')[0];
  bodyTag.className = bodyTag.className.replace(/\bmvt-no-js\b/,'mvt-js')

  const insertLegacyScript = () => {
    const legacyTag = document.createElement('script')
    legacyTag.src = `${window.mvt.theme_directory}/assets/dist/legacy.${window.mvt.version}.js`
    legacyTag.type = 'text/javascript'
    document.body.appendChild(legacyTag)
  }
  
  if (typeof Promise !== 'function') {
    insertLegacyScript()
    return
  }

  require( './helpers/nav.js' )
  require( './helpers/search.js' )

  __webpack_public_path__ = `${window.mvt.theme_directory}/assets/dist/`
  
  const watchComments = () => {
    const commentDiv = document.getElementById('mv-trellis-comments')
    if (commentDiv) {
      const observerConfig = {
        rootMargin: `150px 0px 150px 0px`,
        threshold: 0
      }
  
      const observer = new IntersectionObserver((entries, self) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            import(/* webpackChunkName: "loadComments" */'./apps/comments').then(
              (loadComments) => {}
            )
            self.disconnect()
          }
        })
      }, observerConfig)
  
      observer.observe(commentDiv)
    }
  }
  
  if (! 'IntersectionObserver' in window ) {
    import(/* webpackChunkName: "IO" */'intersection-observer').then(
      (IO) => {
        loadImages()
        watchComments()
      }
    )
  } else {
    loadImages()
    watchComments()
  }
  
  if ( 'serviceWorker' in navigator ) {
    import(/* webpackChunkName: "sw" */'./helpers/register-sw').then(module => {
  
    })
  }
  
}
boot()

// Sample from Create
// Inside the init function we also have a method that will load the style sheet for Create,
// so those styles aren't loaded and parsed until the create card is about to enter the viewport.
if (window.IntersectionObserver) {

  const observer = new IntersectionObserver(((entries, self) => {
    // Get cards in current intersection
    const visibleCards = entries.filter(card => card.isIntersecting)

    // For each card, initialize and unobserve
    visibleCards.forEach(({ target }) => {
      window.mvCreate.init(target)
      self.unobserve(target)
    })
  }))

  // Get all cards and observe theme
  const cards = Array.from(document.getElementsByClassName('mv-create-card'))
  cards.forEach(card => observer.observe(card))

  const reviewsObserver = new IntersectionObserver(((entries, self) => {
    const items = entries.filter(item => item.isIntersecting)

    // For each card, initialize and unobserve
    items.forEach(({ target }) => {
      if (!window.MV_REVIEWS_INIT) {
        window.MV_REVIEWS_INIT = true
        import(/* webpackChunkName: "mv-reviews" */ './Reviews').then(
          (module) => {
            module.default()
          }
        )
      }
      self.unobserve(target)
    })
  }))

  const reviewsId = window.MV_CREATE_SETTINGS.__REVIEWS_DIV__ // eslint-disable-line
  const reviewsRoot = reviewsId && document.querySelector(reviewsId)
  if (reviewsRoot) {
    reviewsObserver.observe(reviewsRoot)
  }
} else {
  const delayListener = () => {
    window.mvCreate.init()
    document.removeEventListener('scroll', delayListener, false)
  }
  document.addEventListener('scroll', delayListener, {passive: true})
}