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

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

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