Bad way of loading pages with react-loadable - reactjs

Question

I'm using React + React-Router + React-loadable for adding a preLoader page before downloading all content of the page.
Here is my code :
AppLoader.js :
import Loadable from 'react-loadable';
import Loading from './preLoader';
import React from 'react';
const LoadableComponent = Loadable({
loader: () => import('./App'),
loading: Loading,
});
export default class App extends React.Component {
render() {
return <LoadableComponent/>;
}
}
preloader.js :
import React from 'react';
import classes from '../../styles/main/preload.less';
let opacityInterval;
export default class PreLoadPage extends React.Component{
render(){
return(
<div className={classes.rootTag}>
Loading...
</div>
);
}
}
I want to show the loading page until the App page is completely ready. and all the images and anything else have been downloaded. maybe it's problem with
the contents that will be given to react by the server. I'm using django-rest-framework for the backend.
How could i tell the loader to wait until the page was completely rendered and then disappear?
Or mayebe :
How could I tell react to complete mounting component after loading all the contents ( including images)?

Answer 1

Right around the time that this question was asked, react released version 16.6.0, which included React.lazy. Additionally, a Suspense component is provided to render a fallback, or loading component/animation.
The following will wait until all content (files/chunks/resources) is retrieved from your server before rendering your lazy loaded component:
const App = React.lazy(() => import('./App'))
const AppWrapper = () => {
return (
<Suspense fallback={<Loading />}>
<App />
</Suspense>
);
};
With that said, it is probably not optimal to lazy load your entire application. The react docs recommend starting by lazy loading each route. This will split your app up into logical chunks. Once you become more comfortable with code-splitting, other places where it makes sense to split your code will become more apparent.