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!