Placeholder content while waiting for component rendering?

[PierreGUI]

Hi there,
Thanks for this amazing gem, really good work!

I'm working on improving the user experience on first page load. I use few components across the page (shared redux store). Even though components are quite small my bundle still is a few hundreds of kB and it can take a while to load with slow connection. While bundle is loading, page shows HTML but none of the React content, which can confuse my users as they don't see full content (sometimes for almost a minute).

One first solution would be server side rendering, so the page loads with pre-rendered HTML.
I'd like the content to be different then, for example showing a spinner (components rely on API call anyway). What if I could specify some placeholder HTML to be displayed while the bundle loads?

Rails would render the page with the provided HTML first (eg a spinner) and then replace it when the whole rendering cycle is done. I don't know how to achieve this today, what do you think?

= react_component "InteractiveComponent" do
    <div id="load">Loading interactive component...</div>
end

Thanks

[justin808]

@PierreGUI See this article:

Rearchitecting Airbnb’s Frontend and scroll down to lazy loading. Does that give you some ideas?

Why not use server rendering?

[PierreGUI]

Hey Justin thanks for your answer :)
This approach is interesting indeed, I might give a try loading my important component first then async-load what's left. Still, it doesn't fully solve my issue:

In essence, we server render the page and deliver just the bare minimum JavaScript required to make it interactive in the browser

This would be React + ReactDOM (and Redux, etc...). At least 400kB (before gzip), it's definitely a OK size (mine is bigger) but I still think showing some HTML while downloading would be better for slow connections.
Throttling my connection to 300kb/s gives me bad feeling about my page loading time...

Server side rendering?
Yes, that's one option. Only it require some efforts to make it work, and I would actually make it render a placeholder to show my user some loading indication.
That's why I came up with the idea of giving this placeholder HTML right before any JS is needed.
It's a quick win ;)

Edit: now trying preact with preact-compat to reduce my bundle's size + server-side rendering because why not (so far no luck).

[PierreGUI]

So I managed to get what I want using server-side rendering (again, awesome work with react on rails). I got one special bundle that gets rendered server side to serve an HTML placeholder \o/

Took me about a day to change my webpack config, split my bundle, fix some other stuff (including monkeypatch execJS context to have native I18n :') ) etc...

Seriously, I believe this would be an awesome feature to provide out of the box. A quick win for anyone in the need of showing some HTML while the JS loads ;)
I would use it everywhere (now only one specific part of my app because it's quite a hassle).

Again thanks for feedback,
Cheers

[justin808]

@PierreGUI I'd love to see some sample github repos and possibly some suggestions or actual PRs for React on Rails, and maybe the https://github.com/shakacode/react-webpack-rails-tutorial.

[justin808]

@PierreGUI feel free to reopen this.