idyll-loader-component

This document uses idyll-loader-component display content that, for one reason or another, doesn’t get displayed on initial page load. You can find the document source here.

To start things off with a contrived example, the blockquote below uses the Loader component.

This could easily be used to lazy-load images. Figure 4 at the bottom of the page does just that. The more interesting case though is using Loader to add content that pulls in sorta expensive external scripts without blocking page load. In particular, by specifying a script source, you can either load an external script on page loads or once the first component that needs it loads. Since it manages load events, you don’t need to worry about ensuring the library is loaded before you use it. Figure 1 shows a plot of $y = x + 1$ . It’s accomplished by creating a custom component with the following code:

class Lineplot extends PlotlyComponent {
  plot (gd) {
    Plotly.plot(gd, {
      data: [{
        y: [1, 2, 3]
      }], layout: {
        margin: {t: 40, r: 30, b: 30, l: 30}
      }
    });
  }
}

The plotly.js component just uses the loader, which is also very simple to use:

render () {
  return <Loader src="..." onLoad={this.onLoad}>
    I'm content added after the script loads!
  </Loader>
}

You can find the source here. It’s quite a bit more complicated than it needs to be because CORS didn’t work out for the external resources I was trying to load. Using the loader was simple though.

And for some reason Figure 2 shows the same plot again, but hey at least it only loads the plotly cdn script once and the end-user doesn’t have to worry about including the script at all. Hooray! 😸

And of course it wouldn’t be complete without good old json loading. In this case I downloaded the data from plot.ly/~rreusser/99.json and dropped it in my data/ folder.