Skip to content
Birdhouse

Processing

Processing components display an animated loading screen while the backend handles a submission. They keep the user engaged with cycling text messages and automatically navigate to the next step when the API call completes.

All processing components share the same visual pattern: a spinner or animation with a text message that changes every few seconds.

Processing (PROCESSING)

Section titled “Processing (PROCESSING)”

The standard processing screen, used between checkout and success in signup flows. While the backend creates the policy, charges the customer, and generates documents, this component keeps the user informed that their request is being handled.

Layout: Standalone

Strapi props:

Prop Type Description
textList array List of strings displayed one after another during loading. Each message is shown for a few seconds before cycling to the next.

Example textList:

[
  "Creating your policy...",
  "Setting up your coverage...",
  "Almost there...",
  "Preparing your documents..."
]

Behavior:

  1. The component triggers the backend API call (policy creation, payment processing)
  2. While waiting for the response, it displays the spinner and cycles through textList messages
  3. When the API call succeeds, it automatically navigates to the next question (typically a Success screen)
  4. If the API call fails, an error message is displayed

ClaimProcessing (CLAIM_PROCESSING)

Section titled “ClaimProcessing (CLAIM_PROCESSING)”

Same concept as Processing, but for claims submission flows. Shown while the backend files the claim.

Layout: Standalone

Strapi props:

Prop Type Description
textList array Messages displayed during the claim submission

CancelPolicyProcessing (CANCEL_POLICY_PROCESSING)

Section titled “CancelPolicyProcessing (CANCEL_POLICY_PROCESSING)”

Processing screen for policy cancellation flows. Handles the additional complexity of mapping form data to the cancellation API.

Layout: Standalone

Strapi props:

Prop Type Description
textList array Messages displayed during the cancellation request
submitKeys object Maps questionnaire answer paths to the API fields expected by the cancellation endpoint. This tells the component which form answers to include in the API request and how to name them.

Common behavior

Section titled “Common behavior”

All processing components:

  • Show a spinner or animation as the primary visual indicator
  • Cycle through textList messages to keep the user engaged during longer waits
  • Automatically navigate to the next question when the API call completes successfully
  • Display an error state if the API call fails, typically with a retry option
  • Use Standalone layout since they manage their own full-page UI

See also

Section titled “See also”