Skip to main content

Loadable

A higher-order component that wraps React's React.lazy and Suspense with a consistent loading fallback. Use it for code-split route components to avoid writing the Suspense + lazy boilerplate repeatedly.

📖 Storybook

Preview​

Live preview↗ Open in Storybook

Import​

import { Loadable } from "@xocialive/ui-components";

Usage​

routes.tsx
import { Loadable } from "@xocialive/ui-components";

const UsersPage = Loadable(() => import("./pages/UsersPage"));
const ProjectsPage = Loadable(() => import("./pages/ProjectsPage"));

const routes = [
  { path: "/users", element: <UsersPage /> },
  { path: "/projects", element: <ProjectsPage /> },
];

With custom fallback​

const HeavyPage = Loadable(() => import("./pages/HeavyPage"), {
  fallback: <CustomSkeleton />,
});

API​

function Loadable(
  factory: () => Promise<{ default: ComponentType }>,
  options?: { fallback?: ReactNode }
): ComponentType;