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);

In-View Interval Timeout

In addition to using intersection observes to watch for components being scrolled into view, an interval is used to check if the component suddenly become visible via a display style change to itself or a parent. The timeout of the interval can be set for all instances of your LazyComponent by chaning the static member inViewIntervalTimeout.

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;
}

static inViewIntervalTimeout = 200; // Change the inView checking interval to 200ms instead of the default 1000
}
window.customElements.define('my-lazy-component', MyLazyComponent);
Individal Component interval timer overwrites

You can overwrite this interval timeout for individual elements by setting the in-view-interval attribute.

<my-lazy-component in-view-interval="5000">
<!-- The interval to check if it is in-view (due to element/parent visibility change) is now set to check every 5 seconds -->
</my-lazy-component>

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.