Hey ya'll! Using suspense + lazy for the first time, would really really appreciate some help.
I've recently enabled suspense and lazy loading in my application, and when I apply them to my <Router>
, I get a solid load + performance boost.
Was wondering though, in-between clicking on pages, I get this huge white flicker. I'm using it like so:
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
{...}
const NotFound = lazy(() => import('./components/NotFound'));
const Feed = lazy(() => import('./components/Feed'));
const Food = lazy(() => import('./components/Food'));
{...}
import('./components/DEBUGEasyPeasyContents'));
const App: React.SFC = () => {
const isLoggedIn = useStoreState(state => state.userModel.isLoggedIn);
const Spinner = <Spin size="large" style={{ width: '100%', margin: 'auto', padding: '10%' }} />;
return (
<>
<ReactNotification />
<Router>
<Suspense fallback={wrapHOC(Spinner)}>
<Switch>
{isLoggedIn && (
<>
<Route path="/login" exact={true} component={Login} />
<Route path="/changePassword" exact={true} component={wrapHOC(ChangePassword)} />
<Route path="/account" exact={true} component={wrapHOC(AccountInfo)} />
<Route path="/dashboard" exact={true} component={wrapHOC(Dashboard)} />
{...}
</Switch>
</Suspense>
</Router>
</>
);
};
export default App;
In-between clicking on pages, the whole page flashes white for like 1.3ms according to the chrome screenshot inspector. It ruins the performance boost for me, so I'm desperate to figure out the cause.
Any advice appreciated, thanks!
Throttle your speed to like
Slow 3G
or something, and see if you can capture what the white background is.Is it displaying a loading screen, which flickers because it loads so quickly?