> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/zayne-labs/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# SuspenseWithBoundary

> API reference for the SuspenseWithBoundary component - combine Suspense and ErrorBoundary.

## Overview

The `SuspenseWithBoundary` component combines React Suspense with an ErrorBoundary, providing a convenient way to handle both loading states and errors in a single component.

## Import

```tsx theme={null}
import { SuspenseWithBoundary } from "@zayne-labs/ui-react/common/suspense-with-boundary";
```

## Props

<ParamField path="children" type="React.ReactNode" required>
  The content to render with suspense and error boundary protection.
</ParamField>

<ParamField path="fallback" type="React.ReactNode">
  Fallback UI to display while suspended (loading state).
</ParamField>

<ParamField path="errorFallback" type="React.ReactNode | ((props: ErrorFallbackProps) => React.ReactNode)">
  Fallback UI to display when an error occurs. Can be a component or render function.
</ParamField>

## Type Definitions

```tsx theme={null}
type SuspenseWithBoundaryProps = {
  children: React.ReactNode;
  errorFallback?: ErrorBoundaryProps["fallback"];
  fallback?: React.ReactNode;
};

type ErrorFallbackProps = {
  error: unknown;
  resetErrorBoundary: (...args: unknown[]) => void;
};
```

## Usage Examples

### Basic Usage

```tsx theme={null}
<SuspenseWithBoundary
  fallback={<LoadingSpinner />}
  errorFallback={<ErrorMessage />}
>
  <AsyncDataComponent />
</SuspenseWithBoundary>
```

### With Error Details

```tsx theme={null}
<SuspenseWithBoundary
  fallback={<div>Loading...</div>}
  errorFallback={({ error, resetErrorBoundary }) => (
    <div>
      <h2>Something went wrong</h2>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try Again</button>
    </div>
  )}
>
  <UserProfile userId={userId} />
</SuspenseWithBoundary>
```

### Data Fetching

```tsx theme={null}
function App() {
  return (
    <SuspenseWithBoundary
      fallback={<Skeleton />}
      errorFallback={({ error }) => (
        <Alert variant="error">{error.message}</Alert>
      )}
    >
      <ProductList />
    </SuspenseWithBoundary>
  );
}

// ProductList uses Suspense for data fetching
function ProductList() {
  const products = use(fetchProducts());
  return <div>{/* render products */}</div>;
}
```

### Nested Loading States

```tsx theme={null}
<SuspenseWithBoundary
  fallback={<PageSkeleton />}
  errorFallback={<PageError />}
>
  <Layout>
    <SuspenseWithBoundary
      fallback={<SidebarSkeleton />}
      errorFallback={<SidebarError />}
    >
      <Sidebar />
    </SuspenseWithBoundary>
    
    <SuspenseWithBoundary
      fallback={<ContentSkeleton />}
      errorFallback={<ContentError />}
    >
      <MainContent />
    </SuspenseWithBoundary>
  </Layout>
</SuspenseWithBoundary>
```

### Minimal Configuration

```tsx theme={null}
// Just error handling
<SuspenseWithBoundary errorFallback={<ErrorPage />}>
  <App />
</SuspenseWithBoundary>

// Just loading state
<SuspenseWithBoundary fallback={<Loading />}>
  <App />
</SuspenseWithBoundary>
```

### Server Components

```tsx theme={null}
// page.tsx
import { SuspenseWithBoundary } from "@zayne-labs/ui-react/common/suspense-with-boundary";

export default function Page() {
  return (
    <SuspenseWithBoundary
      fallback={<ArticleSkeleton />}
      errorFallback={({ error }) => <ErrorDisplay error={error} />}
    >
      <Article />
    </SuspenseWithBoundary>
  );
}

async function Article() {
  const data = await fetchArticle();
  return <ArticleContent data={data} />;
}
```

### Multiple Async Resources

```tsx theme={null}
function Dashboard() {
  return (
    <div className="dashboard">
      <SuspenseWithBoundary
        fallback={<ChartSkeleton />}
        errorFallback={<ChartError />}
      >
        <Chart />
      </SuspenseWithBoundary>
      
      <SuspenseWithBoundary
        fallback={<TableSkeleton />}
        errorFallback={<TableError />}
      >
        <DataTable />
      </SuspenseWithBoundary>
      
      <SuspenseWithBoundary
        fallback={<CardSkeleton />}
        errorFallback={<CardError />}
      >
        <StatsCards />
      </SuspenseWithBoundary>
    </div>
  );
}
```

## Notes

* This component is a convenience wrapper around `ErrorBoundary` and `Suspense`
* The ErrorBoundary wraps the Suspense component
* If `errorFallback` is not provided, the ErrorBoundary still catches errors but won't display a fallback
* If `fallback` is not provided, Suspense will use React's default behavior
* Works with React Server Components and client components
* Useful for data fetching with libraries that support Suspense (React Query, SWR, etc.)