Manage React Skeletons
with Ease.

Stop manually wiring fallbacks. AutoSuspense handles your complex component trees, letting you focus on building features, not skeletons.

Get Started View on NPM

import { AutoSuspense } from "autosuspense";
import MyChild from "./MyChild";

export default function Parent() {
  return (
    <AutoSuspense>
      <MyChild />
    </AutoSuspense>
  );
}

Install

$ npm install autosuspense

Copied!

The Solution

The problems

Autosuspense

solves.

1. Fallback Hell

Currently fallback logic tied to parent usage. Which makes it difficult to adapt. By using Suspend() we are able to provide fallback per component level and merge them later.

2. Fragile Declarations

Today app structure changes break suspense fallback logic. To prevent that the entire fallback tree is collected and prebuilt so it always matches your app structure.

3. Fallback Mapping

Per AutoSuspense Component Centralized fallback system with keys for easier maintainability.

Before

// Before (React Suspense)
<Suspense fallback={<ProfileSkeleton />}>
  <Profile />
</Suspense>

<Suspense fallback={<FeedSkeleton />}>
  <Feed />
</Suspense>

// Parent.tsx
<AutoSuspense>
  <Profile />
</AutoSuspense>
<AutoSuspense>
  <Feed />
</AutoSuspense>

How it works.

Think in terms of the nearest suspense boundary. Build reusable fallback blocks that automatically compose themselves based on your React tree structure.

Wrap components with AutoSuspense

Wrap your suspendable components with the AutoSuspense block. It acts as the nearest suspense boundary and manages the orchestration of fallback skeletons.

Automatic composition

Zero boilerplate

Component.tsx

import { AutoSuspense } from "autosuspense";
import Child1 from "./Child1";
import Child2 from "./Child2";

export default function Parent() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      
      {/* Use like a regular Suspense block */}
      <AutoSuspense>
        <Child1 />
        <Child2 />
      </AutoSuspense>
    </div>
  );
}

Declare component-level Fallback Blocks

Instead of defining the entire fallback tree at once, define fallbacks at a component level using the Suspend function. This allows for modular, reusable skeleton blocks that automatically compose themselves based on your React tree structure.

Automatic composition

Zero boilerplate

Component.tsx

import { Suspend } from "autosuspense";

const Child1 = () => {
  return (
    <div className="p-4 border rounded">
      <h3>User Profile</h3>
      <p>Data loading...</p>
    </div>
  );
};

// Add any React component to be used as a skeleton
export default Suspend(Child1, <Child1Skeleton />);

Automatic Skeleton Composition

AutoSuspense automatically detects which components are suspended and wires their individual skeleton blocks into a single, cohesive loading state. This makes your loading UI more robust and less flaky.

Automatic composition

Zero boilerplate

Component.tsx

// Parent defines the boundary
<AutoSuspense>
  <Profile />
  <Feed />
</AutoSuspense>

// Components define their own fallbacks
export default Suspend(Profile, <ProfileSkeleton />);
export default Suspend(Feed, <FeedSkeleton />);

Advanced Customization

Utilize the fallbacks prop in the AutoSuspense component to provide nested children or global overrides. You can even use string identifiers to wire pre-defined blocks together.

Automatic composition

Zero boilerplate

Component.tsx

const Dashboard = () => {
  return (
    <AutoSuspense 
      fallbacks={{
        block: <BlockSkeleton />,
        card: <CardSkeleton />
      }}
    >
      <AsyncWidget1 />
      <AsyncWidget2 />
    </AutoSuspense>
  );
}

const AsyncWidget1 = () => {
  return (
      <div>
        ...
      </div>
  );
}

export default Suspend(AsyncWidget1, "block");

Ready to automate your suspense?

What it works with

React 16+

Next.js

Vite

Remix

Manage React Skeletons with Ease.

1. Fallback Hell

2. Fragile Declarations

3. Fallback Mapping

How it works.

Wrap components with AutoSuspense

Declare component-level Fallback Blocks

Automatic Skeleton Composition

Advanced Customization

Ready to automate your suspense?

What it works with

1. Fallback Hell

2. Fragile Declarations

3. Fallback Mapping

Wrap components with AutoSuspense

Declare component-level Fallback Blocks

Automatic Skeleton Composition

Advanced Customization

Manage React Skeletons
with Ease.