react-loadable component does not wait trigger to load

Question

This is a basic header component that includes buttons to show login/register forms on click.

The intention is, of course, that the login and register components shouldn't be loaded until requested.

react-loadable is creating an additional file ( 0.js ) that seem to include the register component, but my search did not turn out any reference to login.

In any case, upon initial load, both login and register are being loaded, as my console.log shows.

Of course, I was expecting that they would not be loaded until the triggering button was clicked on.

Note that I did attempt to use react-loadable on routes, and it seems to work correctly, ie, I can see the files being loaded on the network tab of the dev tools.

Also, I happen to have a service worker precaching the build files for now, but I do not believe that should impact this. Or should it? It doesn't on routes.

Excerpts of the header component:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import Loadable from 'react-loadable';

//import Register from '../register/'; ** PREVIOUS REGULAR IMPORT
//import Login from '../login/'; ** PREVIOUS REGULAR IMPORT
import { Loading } from '../../../tools/functions';


const Login = Loadable({
  loader: () => import('../login/'),
  loading: Loading,
  delay: 200,
  timeout: 5000
});

const Register = Loadable({
  loader: () => import('../register/'),
  loading: Loading,
  delay: 200,
  timeout: 10000
});

render () {
     return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );
}

The Loading function:

export const Loading = ({ error }) => {
if (error) {
  return 'error';
} else {
  return <h3>Loading...</h3>;
}

}

Answer 1

My mistake was that I had the state change on the child component. So, I factored it up, changing the render method of the header component as follows:

   const activeDialog = () => {
        if (this.state.activeLogin) {
            return (
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activeRegister) {
            return (
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activePasswordResetRequest) {
            return (
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
            )
        }
    }

    return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                {activeDialog()}
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );