[Lazy Renderer] #vue

lazy-renderer.vue

<template>
  <div v-if="isTimeToRender">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    timeToRender: { type: Number, default: 300 },
  },
  data: () => ({ isTimeToRender: false }),
  created() {
    setTimeout(() => {
      this.isTimeToRender = true
    }, this.timeToRender)
  },
}
</script>

use.vue

<script>
import LazyRenderer from '@/components/common/lazy-renderer'
const HorizontalScroll = () =>
  import(
    /* webpackChunkName: "CancerDiseasesRest" */ './international-intro__horizontal-scroll.vue'
  )
export default {
  components: {
    LazyRenderer,
    HorizontalScroll,
  }
}
</script>