Code Splitting

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.

App.jsx

// import from React
import { useState, lazy, Suspense } from "react";
// delete Details & Search params imports

// above const App =
const Details = lazy(() => import("./Details"));
const SearchParams = lazy(() => import("./SearchParams"));

// inside QueryClientProvider
<Suspense
  fallback={
    <div className="loading-pane">
      <h2 className="loader">🌀</h2>
    </div>
  }
>
  […]
</Suspense>;