Ember lazy-rendered component

component.js

import Component from '@ember/component';
import { later, run } from '@ember/runloop';
export default class UiLazyRendered extends Component.extend({
  // anything which *must* be merged to prototype here
  showContent: false,
  timeout: 36,
  didInsertElement() {
    run('afterRender', () => {
      later(this, 'toggleContent', this.timeout + Math.random() * 100);
    });
  },
  toggleContent() {
    if (this.isDestroying || this.isDestroyed) {
      return;
    }
    this.toggleProperty('showContent');
  },
  tagName: ''
}) {
  // normal class body definition here
}

template.hbs

{{#if this.showContent}}
  {{yield}}
{{else}}
  <div style="width: 100%; min-height: 500px;">
    // some loading spinner or placeholder
  </div>
{{/if}}

how to use it?

<LazyRendered>
  My Lazy Content
   <LazyRendered>My very lazy content</LazyRendered>
</LazyRendered>