polite-element

Wait to render until the browser has less load

Usage no npm install needed!

<script type="module">
  import politeElement from 'https://cdn.skypack.dev/polite-element';
</script>

README

polite-element stability

npm version build status downloads js-standard-style

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.

Installation

$ npm install polite-element

See Also

License

MIT