Here I am having 4 components, where I am rendering all these four components in App.js. These four components individually hitting different APIs. So one component may render faster and others may render slower. What I am trying to achieve here is I need to show a loading indicator, till all components are rendered. I tried that using React Lazy loading and Suspense but no luck. Please help me with this. Here I am sharing the code of what I have done. Thanks in advance.
code:
import React, { Suspense, lazy } from "react";
import Navbar from "../layout/Navbar";
import Loader from "../layout/Preloader";
const Bar = lazy(() => import("./bar"));
const VariablePie = lazy(() => import("./variablePie"));
const Pie = lazy(() => import("./pie"));
const CombineChart = lazy(() => import("./combineChart"));
const Dashboard = () => (
<div>
<Navbar />
<Suspense fallback={<Loader/>}>
<main>
<div className="row" style={{ backgroundColor: "#eee" }}>
<div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
<Bar />
</div>
<div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
<VariablePie />
</div>
<div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
<Pie />
</div>
<div className="col s12 m6 l6" style={{ margin: "10px 0px" }}>
<CombineChart />
</div>
</div>
</main>
</Suspense>
</div>
);
export default Dashboard;