State screens

What a page or a region shows instead of its content: ErrorState when it failed, LoadingState while it loads, and FullPageMessage for a whole screen before the app’s frame exists.

Language

Appearance

Error with a retry

The retry keeps the focus while it runs.

Something went wrong

We couldn't load the campaign’s calls. Check your connection and try again.

import { useState } from 'react';
import { ErrorState } from '@arbol-ai/ui';

const RetryExample = () => {
  const [isRetrying, setIsRetrying] = useState(false);
  return (
    <ErrorState
      description="We couldn't load the campaign’s calls. Check your connection and try again."
      isRetrying={isRetrying}
      onRetry={() => {
        setIsRetrying(true);
        setTimeout(() => {
          setIsRetrying(false);
        }, 1500);
      }}
    />
  );
};

<RetryExample />

Access error

Your role doesn’t open this page

This page is for administrators. Ask one to give you that role.

Back to the dashboard

import { LockSimpleIcon } from '@phosphor-icons/react';
import { ButtonLink, ErrorState } from '@arbol-ai/ui';

<ErrorState
  action={
    <ButtonLink href="#/state-screens" variant="outline">
      Back to the dashboard
    </ButtonLink>
  }
  description="This page is for administrators. Ask one to give you that role."
  icon={<LockSimpleIcon aria-hidden />}
  title="Your role doesn’t open this page"
/>

Loading

import { LoadingState } from '@arbol-ai/ui';

<div className="rounded-card border">
  <LoadingState label="Loading appointments…" />
</div>

Full-page message

Its own main landmark and h1, for screens outside AppShell.

You signed out

You can sign in again whenever you like.

import { Button, FullPageMessage } from '@arbol-ai/ui';

<div className="rounded-card overflow-hidden border">
  <FullPageMessage
    action={<Button>Sign in again</Button>}
    className="min-h-96"
    description="You can sign in again whenever you like."
    title="You signed out"
  />
</div>

Source

The examples above are src/components/state-screen/state-screen.examples.tsx, which the library’s tests render too.