Declaratively defer rendering for large components and lists (Can v4)

can-defer.js

import Component from 'can/component/';

export default Component.extend('CanDeferComponent', {
  tag: 'can-defer',
  viewModel: {
      delayMs: {
        type: 'number',
        default: 0,
        set: x => parseInt(x, 10)
      },
      initialHtml: { default: null },
      /*
        This is a convenience prop for rendering lists in
        chunks as one can pass (delay-scalar)="scope.index"
      */
      delayScalar: {
        default: null,
        set: x => parseInt(x, 10)
      },
      isActive: { default: false },
      delay: {
        get () {
          const delayScalar = this.delayScalar;
          const delayMs = this.delayMs;
          
          if (delayScalar === 'number') {
            return delayMs;
          }

          return delayScalar * delayMs;
        }
      }
    },
  _timeout: 'any',  
  activate () {
      if (!this._timeout && !this.isActive) {
        this._timeout = setTimeout(() => {
          requestAnimationFrame(() => {
            this.isActive = true;
            this._timeout = null;
          });
        }, this.delay);
      }
    }
  },
  view: '{{#if isActive}}<content/>{{else}}{{{initialHtml}}}{{/if}}',
  connectedCallback: (el) => {
    this.element = el;
    this.viewModel.activate();
  }
});

/* USAGE

<can-defer delay-ms="500">
  <my-heavy-component />
</can-defer>

{{#each list}}
  <can-defer delayMs="500" delayScalar="{{scope.index}}">
    <my-heavy-item {{value}}="." />
  </can-defer>
{{/each}}

*/