I've had a problem with React.Suspense and fallback from him. I'm using Suspense in this way:
const Overview = lazy(() => import("../pages/dashboard/overview"));
...
...
...
<React.Suspense
fallback={
<div className="centerDiv">
<Spin size="large" />
</div>
}
>
<Route path={routes.overview} component={Overview} />
</React.Suspense>
In my Overview
component I've had a table which is loading right now after end of the suspense fallback, so I have situation that after redirect to Overview
page, I've had loading from Suspense
fallback spinner and when it come to end then another spinner is running for fetching data to my table.
I don't like it so what can I do it?
I'm thinking about ending suspense fallback on action from Overview
component, in this case my table has been loaded before ending of the suspense spinner, when all data is fetched then my suspense is ending. But how can I do it? How to properly use Suspnse to prevent this type of situations?
Thanks for any help!