Как правильно использовать lazy loading в React?

Question

[luxurypluxury]

Использую lazy-loading для чанкования кода.

const HomePage = lazy(() => import("./pages/HomePage"));
const ErrorPage = lazy(() => import("./pages/ErrorPage"));

Далее

<Suspense fallback={<Loader />}>
      <Routes>
        <Route path="*" element={<ErrorPage />} />
        <Route path="/" element={<HomePage />} />
       </Routes>
</Suspense>

Меня раздражает что лоадер чисто промигивает при загрузке страниц, иногда нормально грузится. Но когда страницы прогрузились, то при переходе на них Suspense просто мигает на доли миллисекунд. Как сделать грамотно?

Comments

[Александр]

Оборачивать каждый element в Suspense не пробовали?

[Антон Горецкий]

Грамотно оборачивать в саспенс сами элементы а не роуты.

[Антон]

const HomePage = lazy(() => import("./pages/HomePage"));
const ErrorPage = lazy(() => import("./pages/ErrorPage"));

const App = () => {
  return (
    <Routes>
      <Route path="*" element={
        <Suspense fallback={<Loader />}>
          <ErrorPage />
        </Suspense>
      } />
      <Route path="/" element={
        <Suspense fallback={<Loader />}>
          <HomePage />
        </Suspense>
      } />
    </Routes>
  );
};