Async state

TS

import { … } from "@fungi.computer/caps/blocks/async-state";

Content

TSX

import { AsyncState } from "@fungi.computer/caps/blocks/async-state";

export default function Content() {
  return (
    <AsyncState
      state="content"
      loading="Loading spores…"
      empty="No spores yet."
      error="Could not load spores."
      content={
        <p className="text-sm">
          12 spore samples catalogued, 3 fruiting this week.
        </p>
      }
    />
  );
}

Loading and error

TSX

import { AsyncState } from "@fungi.computer/caps/blocks/async-state";

export default function LoadingAndError() {
  return (
    <div className="flex flex-wrap gap-sm">
      <AsyncState
        className="w-full max-w-xs"
        state="loading"
        loading="Loading spores…"
        empty="No spores yet."
        error="Could not load spores."
        content={null}
      />
      <AsyncState
        className="w-full max-w-xs"
        state="error"
        loading="Loading spores…"
        empty="No spores yet."
        error="Could not load spores."
        content={null}
      />
    </div>
  );
}

Switcher

TSX

import {
  AsyncState,
  type AsyncStateValue,
} from "@fungi.computer/caps/blocks/async-state";
import { Button } from "@fungi.computer/caps/components/button";
import { useState } from "react";

const states: AsyncStateValue[] = ["loading", "empty", "error", "content"];

export default function Switcher() {
  const [state, setState] = useState<AsyncStateValue>("loading");
  return (
    <div className="flex flex-col gap-sm">
      <div className="flex flex-wrap gap-2xs">
        {states.map((value) => (
          <Button
            key={value}
            size="xs"
            variant="outline"
            onClick={() => {
              setState(value);
            }}
          >
            {value}
          </Button>
        ))}
      </div>
      <AsyncState
        state={state}
        loading="Loading spores…"
        empty="No spores yet."
        error="Could not load spores."
        content="3 spores fruiting this week."
      />
    </div>
  );
}

Props

AsyncStateProps

Prop	Type	Description
state	"loading" | "empty" | "error" | "content"	The host's explicit state; this block does not infer it from its slots.
loading	ReactNode
empty	ReactNode
error	ReactNode
content	ReactNode

• state"loading" | "empty" | "error" | "content"

  The host's explicit state; this block does not infer it from its slots.

• loadingReactNode
• emptyReactNode
• errorReactNode
• contentReactNode

Full types: API reference.