MENU

Loadable Components

loadable-components is a library for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code-splitting simple, including in server-rendered apps. Many modern projects instead get code-splitting for free from React.lazy() plus Suspense (which became SSR-capable as of React 18) or from their framework's own built-in code splitting (for example, Next.js's dynamic()); loadable-components remains a solid option when you need more manual control. Here's an example of how to use loadable-components:

import loadable from "@loadable/component";
import Loading from "./Loading.js";

const LoadableComponent = loadable(() => import("./Dashboard.js"), {
  fallback: <Loading />
});

export default function LoadableDashboard() {
  return <LoadableComponent />;
}

import loadable from "@loadable/component";
import Loading from "./Loading.js";

const LoadableComponent = loadable(() => import("./Dashboard.js"), {
  fallback: <Loading />
});

export default function LoadableDashboard() {
  return <LoadableComponent />;
}