Skip to content
Ink
Esc
↑↓navigate↵open⌘Jpreview
On this page

Screen states

Show loading, empty and error states.

Loading

Place LoadingState directly inside Screen.

import { LoadingState, Screen, Text } from "ink";

<Screen title="Forecast">
  {loading
    ? <LoadingState />
    : <Text>18°C and sunny</Text>}
</Screen>
Loading centred in the forecast screen.
The forecast replaces the loading message.

Custom message

<LoadingState label="Finding your location…" />
Finding your location centred on the page.

Error

ErrorState places a retry action at the bottom.

<Screen title="Forecast">
  <ErrorState message="Could not load the forecast."
    onRetry={reload} />
</Screen>
A centred forecast error with Try again at the bottom.

Empty

<Screen title="Saved places">
  <EmptyState title="No saved places"
    action={{ label: "Add a place", onPress: addPlace }} />
</Screen>
No saved places with an Add a place action.

Place loading, empty and error states directly inside Screen. They replace its content. Keep existing content visible during background refreshes; use Resources and actions to track loading and failures.

ErrorState accepts retryLabel and disabled. EmptyState accepts an optional description and action. These components display state; they do not fetch data.