Strategically placed Loader to prevent jankyness @ initial page load

[AllanPooley]

Hey guys, some of the feedback from RYIFY design review was some janky-ness on initial page load. Specifically, something to the description of a Footer flying around everywhere.

This is what fixed it, and I'd wager it's a worthwhile out-of-the-box fix for Starward.

It essentially plants a <Loading /> (previously null) that fills the gap between the Header and Footer until the page components have been fetched from WP.

Before:

function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(({ default: Component }) => {
          AsyncComponent.Component = Component;
          this.setState({ Component });
        }).catch(err => console.error(err));
      }
    }

    render() {
      const { Component } = this.state;
      if (Component) {
        return <Component {...this.props} />;
      }
      return null;
    }
  };
}

After:

function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(({ default: Component }) => {
          AsyncComponent.Component = Component;
          this.setState({ Component });
        }).catch(err => console.error(err));
      }
    }

    render() {
      const { Component } = this.state;
      if (Component) {
        return <Component {...this.props} />;
      }
      return <Loading />; // <--- 👋Hi, I'm new here!
    }
  };
}

[falconmick]

Ah is this from the code splitting?

My only request is that you turn JavaScript off (in chrome) and make sure the SSR code works. If your not sure how to do that let me know and I’ll try to make sure it still works

[AllanPooley]

@falconmick the entire asyncComponent function is the handy work of @samlogan in the React16/react-router-v4 update. It already exists in the base code, if you need info on it he's the best man to provide clarity on the functionality here.

I've just replaced the null return with a loader in the sliver of time that between when you hit the page and when the app fetches the components.