LazyInclude JS

Table of content

• Examples
• JS API

Usage

Use the LazyInclude component to load parts of your page lazyliy.

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import { LazyInclude } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      LazyInclude,
    },
  };
}

createApp(App);

html

<div data-component="LazyInclude" data-option-src="/path/to/section-renderer">
  <span data-ref="loading">Loading...</span>
  <span data-ref="error" class="hidden">An error occured.</span>
</div>

Orchestration

The content is fetched when the component is mounted. Use withMount... decorators to wrap the LazyInclude class for a fine grained loading strategy.