Как заставить React Lazy сначала загружать, а потом менять страницу

Сейчас у меня React Lazy сначала полностью удаляет содержимое, потом начинает грузить новую страницу, мне нужно что бы элемент загрузки Suspence (fallback) появился сразу же, но страница сменилась только после того, как загрузка полностью окончится, мой код:

import React, { Suspense, lazy } from 'react';
import { Route, Switch } from "react-router-dom";


import { TopMenu, NavMenu, Footer } from './modules';
import { Loader } from 'UI';

const Main = lazy(() => import('./Pages/Main'));
const Product = lazy(() => import('./Pages/Product'));
const FastBuy = lazy(() => import('./Pages/FastBuy'));
const Category = lazy(() => import('./Pages/Category'));
const Page404 = lazy(() => import('./Pages/Page404'));

const MainPages = () => {
  return (
    <div>
      <TopMenu />
      <NavMenu />

      <Suspense fallback={<Loader />}>

        <Switch>

          <Route exact path="/" component={Main} />

          <Route exact path="/product/:product/:idType?/:idSubType?" component={Product} />
          <Route exact path={["/product","/product/*"]}>
            <div>К сожалению страницы товара нет(((</div>
          </Route>

          <Route exact path="/fast-buy/:product/:idType?/:idSubType?" component={FastBuy} />

          <Route exact path="/category/:name?" component={Category} />

          <Route exact path="*" component={Page404}/>

        </Switch>

      </Suspense>

      <Footer />
    </div>
  );
}

export default MainPages;