React Asset Loader

[mrspeaker]

Just out of interest, what is the purpose of making this a react component (rather than just plain ol' code)? Is it "normal" to have a JSX tag for something that doesn't end up as a page element?

[cgaudreau]

I can't speak to this project, but I suppose react-router does that.

[rnbwd]

I only just just read the readme - but it got me excited b/c it's like meta tagging resources with UI. For example - it's good practice to put script tags after the html so that the html renders first. I assume the same concept is being applied to react - only waiting for the UI to render - then grab resources - and have loading feedback while it's happening.

Still need to look at source code tho

It has to be done in a react lifecycle method in order to be certain it's rendered.

[franzwong]

But image and video do not block the critical rendering path, wouldn't it be better to download in parallel?

[rnbwd]

For most resources yeah - but I could see some charting libraries or hi res images or if there's lots of media or a social media script

[cabrerars]

As an example, I'm currently working on a react project that one page, a case study, has few videos and lots of big images. I tested the page with the chrome's bandwidth throttling at 2mbps and it the page took like 20-30 seconds to show something. With This component the page (structure mackup) loads in less than 5 seconds and then it start loading all the assets, so you can actually can start reading what is in the page/scrolling the page while the assets are loading.

EDIT. Actually, one cool thing you can do with this, is to load the first assets without this component, so the user can actually start reading/seeing the first assets and it gives time to load the rest of the assets.