LazyComponent

Table of Contents

Description

This is a base class like Component but the render method is not called until the element is visible (in the view), a skeleton is rendered until then.

Basic Usage

Extend the LazyComponent class to create a lazy-loaded component. The component will render its content only when it becomes visible in the viewport.

import LazyComponent from 'kempo';
class MyLazyComponent extends LazyComponent {
constructor(){
super();
// Your Constructor
}
async render(force){
if(await super.render(force)){
// Your render logic
return true;
}
return false;
}
}
window.customElements.define('my-lazy-component', MyLazyComponent);

JavaScript Reference

Constructor

Extends Component
new LazyComponent()
new LazyComponent(Object shadowOptions)

This class cannot be instantiated directly, but rather should be extended, optionally passing in the shadowOptions.

Requirements

Attributes

unrender: boolean

If set to true, the component will unrender its content when it goes out of view.

Methods

async renderSkelton(): Promise

Renders the skeleton template of the component. This is called when the component is not yet visible in the viewport or when it goes out of view and unrender is set to true.

async inViewCallback(): Promise

Callback method that is called when the component becomes visible in the viewport. By default, it calls the render method.

async outOfViewCallback(): Promise

Callback method that is called when the component goes out of view. If unrender is set to true, it calls the renderSkelton method.