One component for the four states every data region has. Every list rebuilds this branch, and each rebuild forgets one — usually the empty case.
Loading preview...
import { useState } from "react";
import { Inbox } from "lucide-react";
import { Button } from "@/components/ui/klyv-state-view-utils/components-Button-Button";
import { Card } from "@/components/ui/klyv-state-view-utils/components-Card-Card";
import { SegmentedControl } from "@/components/ui/klyv-state-view-utils/components-SegmentedControl-SegmentedControl";
import { StateView } from "@/components/ui/klyv-state-view";
import { Text } from "@/components/ui/klyv-state-view-utils/components-Text-Text";
import { type ViewStatus } from "@/components/ui/klyv-state-view";
function StateViewExample() {
const [status, setStatus] = useState<ViewStatus>('ready')
const data = status === 'ready' ? ['a', 'b', 'c'] : status === 'empty' ? [] : undefined
return (
<div className="flex w-full flex-col gap-3">
<SegmentedControl
label="State"
size="sm"
value={status}
onValueChange={(value) => setStatus(value as ViewStatus)}
className="self-start"
options={[
{ value: 'loading', label: 'Loading' },
{ value: 'empty', label: 'Empty' },
{ value: 'error', label: 'Error' },
{ value: 'ready', label: 'Ready' },
]}
/>
<Card title="Recent transactions" className="w-full">
<StateView
data={data}
status={status}
className="mt-2"
skeleton={
<div className="flex flex-col gap-3 py-2">
{[0, 1, 2].map((index) => (
<div key={index} className="flex items-center gap-3">
<span className="size-9 shrink-0 animate-pulse rounded-full bg-surface-muted" />
<span className="h-3 w-1/3 animate-pulse rounded bg-surface-muted" />
<span className="ml-auto h-3 w-16 animate-pulse rounded bg-surface-muted" />
</div>
))}
</div>
}
empty={{
icon: Inbox,
title: 'No transactions yet',
description: 'Once money moves in or out, it will appear here with a running balance.',
action: <Button size="sm">Make a transfer</Button>,
}}
error={{
title: 'Could not load transactions',
description: 'Your balance is unaffected.',
detail: 'TXN_SERVICE_TIMEOUT / req_8f21c4',
}}
onRetry={
<Button size="sm" variant="outline" onClick={() => setStatus('ready')}>
Try again
</Button>
}
>
{(rows) => (
<div className="flex flex-col gap-2 py-2">
{rows.map((row) => (
<Text key={row} size="body">
Transaction {row.toUpperCase()}
</Text>
))}
</div>
)}
</StateView>
</Card>
</div>
)
}
export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><StateViewExample /></div></div>}