# LazyComponent

Table of Contents

###### Examples

Basic Usage

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### 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

- Component
- isInView Utility Function
- raf Utility Function

### 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.