Lazy Load HOC

LazyLoad.vue

<template>
  <div v-if="outOfView" class="placeholder">&nbsp;</div>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {}
      },
    }
  },

  data() {
    return {
      outOfView: true,
    }
  },

  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
          this.outOfView = false
          this.$emit('in-view')
          observer.disconnect()
        }
      })
    }, this.options)

    observer.observe(this.$el)
  },
}
</script>