Don't allow router location change until next content has arrived in the store

[tiberiuichim]

There is a very subtle problem that is perceivable only if a page has it own specially dedicated view React component, with a design that makes it obvious and easily distinguished from other components. For example, in our case, a HomepageView that has a background color or image that's different from the rest of the website.

Now for the problem. There is the following sequence of events:

• user clicks on router link
• router mounts the appropriate component for that route
• the component displays itself with the current content available in the redux store!
• on mount, the component then triggers the getAction content.
• on new data received, the component uses the new content from the redux store and redraws itself

If this whole cycle is anything more then 40ms, it is perceivable by the user. The volto.kitconcept.com server, which is very fast, returns a ?fullobjects getContent request in 100ms+.

In my view, this is on the same level of perceivable problem as the Flash of Unstyled Content.

[tiberiuichim]

Some of the stuff we've tried included a condition in the render() of component that avoids rendering any content (or render a placeholder) until the store content matches the router path.

render() {
    if (getPathname(props.content['@id']) !== props.pathname) return <Placeholder />
}

[sneridagh]

@tiberiuichim @robgietema we should talk about this today, if possible. Putting it on the sprint list as a reminder.

[tiberiuichim]

See https://github.com/plone/volto/issues/1550

[tiberiuichim]

I've found this sort of problem mentioned in the after.js documentation (which is Jared Palmer's (author of Razzle) - version of next.js (an integrated solution for isomorphic React apps)). In that package the router is enhanced so that it calls static getAsyncProps functions from the components so it "prefetches" the component data.

[tiberiuichim]

Leaving this for future reference: https://github.com/eea/volto-base/blob/a0b13935633f5aa70e273612226c5c8cce4d4756/src/store.js#L60