Delay prop does not work, loading prop "flashing" without delay

Question

I am using [email protected] for code-splitting on a basic web app. Whether I set the delay prop or not, the loading spinner flashes immediately on page load with no delay. I've stripped down the app to remove some of the routing logic, removed the CSS animations, tried earlier versions of the @5 release, removed the AppBar that remains rendered, the icon is still flashing immediately on page load with no delay. Here is a stripped down version of the Loadable implementation:

import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";


function SpinningIcon() {
  return <Cached color="inherit" className="spinning" />;
}

const AsyncHome = Loadable({
  loader: () => import("./containers/Home"),
  loading: SpinningIcon,
  delay: 1000
  //delay at 1 second, still flashes on load

});
const AsyncLogin = Loadable({
  loader: () => import("./containers/Login"),
  loading: SpinningIcon
  //no delay prop, still flashes
});

export default ({ childProps }) => (
  <Switch>
    <Route path="/" exact component={AsyncHome} props={childProps} />
    <Route path="/login" exact component={AsyncLogin} props={childProps} />
  </Switch>
);

I'm at a loss for how to move forward with this, has anyone encountered the same issue? Is there other info that could be helpful to figuring out the issue?

Answer 1

You forgot the "pastDelay" props, on your loading, as stated on the docs: Avoiding Flash Of Loading Component

Your function should be something like this:

function SpinningIcon({ pastDelay }) {
  if (pastDelay) {
    return <Cached color='inherit' className='spinning' />
  }

  return null
}

Hope this helps :)