Polite-element NPM

polite-element

Politely waits to render an element until the browser has time to spare using window.requestIdleCallback(). Useful to create incrementally loading applications that don't block user interaction.

Usage

var polite = require('polite-element')
var html = require('bel')

var main = html`
  <main>
    ${polite(renderBasic, renderFancy)()}
  </main>
`
document.body.appendChild(main)

function renderBasic () {
  return html`
    <img alt="ms. floof" />
  `
}

function renderFancy () {
  return html`
    <img src="https://cool-cat.pix/meow" alt="ms. floof" />
  `
}

API

el = politeElement(renderBasic, renderFancy)

Create an initial element on load using renderBasic. Once the browser is less busy it will call the renderFancy function to load a more complex element. Always calls renderBasic when run in Node.