0

I am using react-loadable@5.5.0 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?

bcaspar
  • 163
  • 1
  • 9
  • I use Loadable and nothing in your code stands out. Sorry I don't really know. The only thoughts I have are to see if it happens in an incognito window in case it is related to a cached resource somehow. Alternatively you can try to use React.lazy and React.Suspense in place of Loadable. I used to for the first time today instead of Loadable, it was quick and easy. https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactlazy-code-splitting-with-suspense – Tom Coughlin Nov 21 '18 at 03:19
  • Thanks Tom - no change in the incognito window. I implemented React.lazy and React.Suspense but am still getting the loading component to flash briefly before the component renders. It's an awkward amount of time, too little to make sense, but long enough to get noticed. Reading through the docs, it doesn't seem like Suspense has a solution for this, some sort of delay prop like Loadable. – bcaspar Nov 26 '18 at 17:54

1 Answers1

0

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 :)

Guilherme Holz
  • 1