yunohost-admin/app/src/components/LazyRenderer.vue

<template>
  <div class="lazy-renderer" :style="`min-height: ${fixedMinHeight}px`">
    <slot v-if="render" />
  </div>
</template>

<script>
export default {
  name: 'LazyRenderer',

  props: {
    unrender: { type: Boolean, default: true },
    minHeight: { type: Number, default: 0 },
    renderDelay: { type: Number, default: 100 },
    unrenderDelay: { type: Number, default: 2000 },
    rootMargin: { type: String, default: '300px' },
  },

  data() {
    return {
      observer: null,
      render: false,
      fixedMinHeight: this.minHeight,
    }
  },

  mounted() {
    let unrenderTimer
    let renderTimer

    this.observer = new IntersectionObserver(
      (entries) => {
        let intersecting = entries[0].isIntersecting

        // Fix for weird bug when typing fast in app search or on slow client.
        // Intersection is triggered but even if the element is indeed in the viewport,
        // isIntersecting is `false`, so we have to manually check this…
        // FIXME Would be great to find out why this is happening
        if (!intersecting && this.$el.offsetTop < window.innerHeight) {
          intersecting = true
        }

        if (intersecting) {
          clearTimeout(unrenderTimer)
          // Show the component after a delay (to avoid rendering while scrolling fast)
          renderTimer = setTimeout(
            () => {
              this.render = true
            },
            this.unrender ? this.renderDelay : 0,
          )

          if (!this.unrender) {
            // Stop listening to intersections after first appearance if unrendering is not activated
            this.observer.disconnect()
          }
        } else if (this.unrender) {
          clearTimeout(renderTimer)
          // Hide the component after a delay if it's no longer in the viewport
          unrenderTimer = setTimeout(() => {
            this.fixedMinHeight = this.$el.clientHeight
            this.render = false
          }, this.unrenderDelay)
        }
      },
      { rootMargin: this.rootMargin },
    )

    this.observer.observe(this.$el)
  },

  beforeUnmount() {
    this.observer.disconnect()
  },
}
</script>