When using turbolinks, unmount components just before loading the new page

[rmosolgo]

I'm migrating my project to React & Turbolinks. I have a non-optimized page which exposed this issue.

I think the react_ujs unmounts components sooner than it has to. It unmounts on page:before-change, but I think it could wait until page:receive.

Here's the difference it made for me. In the GIF below, the chart & list of times is a React component. The "stations" link is another page that takes a long time to load.

page:before-change

Notice the blank state while it waits for the page from the server.

page:receive

The components are left around til the new page gets here.

What do you think? Is there a downside to this?

[rmosolgo]

Another point for this issue:

If you use Turbolinks.visit (and consequently, redirect_via_turbolinks_to on the server), the before-change event is never fired (since a link is never clicked). Since before-change isn't fired, componentWillUnmount hooks aren't executed. My flux changeHandlers are still attached!

However, receive is fired by Turbolinks.visit, so this patch should solve that issue, too.

[zpao]

I don't know anything about Turbolinks events, but those gifs are pretty convincing. I assume receive is still before the content is actually replaced? cc @meleyal who's done some of our work there.

Also, #69 just went in so you'll need to rebase.

[rmosolgo]

Yes, thats right -- from the turbolinks readme:

• page:receive the page has been fetched from the server, but not yet parsed

Ok, rebased, looks good locally!

[meleyal]

Tested locally and this looks good

[zpao]

👍 thanks!