States

There are various ways to present a temporary state to the user.
Depending on which states you need to cover and the technical requirements, consider using one of the following patterns:

Inline

Rules For Android

Use the Composable StatefulLayout
Not to be confused with the old View based StatefulLayout class.

Empty State

This is a static component without an actionable button. It is used to inform users what kind of content they can expect on the screen they are viewing.

Rules For Android

Set StatefulLayoutState.Empty as state to the StatefulLayout
Can have an optional primary and secondary action

Error State

An inline Error State is usually the result of a time-out of a loading state or a failed network call.
It features an Error icon, a brief description of the error and a Retry action to trigger the request again.

Rules For Android

Set StatefulLayoutState.Error as state to the StatefulLayout

Loading State

The inline Loading State features a loading indicator and an accompanying message. It gets replaced by the actual UI once the loading is finished.

Rules For Android

Set StatefulLayoutState.Loading as state to the StatefulLayout

Skeleton

A more detailed variant of the default Loading State. Instead of a generic loading animation, the expected interface is rendered in an abstract way, to give the user an idea what kind of content they can expect. It gets replaced by the actual UI once the loading is finished.

Rules For Android

Use extension function Modifier.shimmerPlaceholder to apply the shimmer to each text element down the tree.
Some components might already offer an isSkeleton parameter to handle the shimmering.
If a component does not offer it then it needs to be added and shimmerPlaceholder needs to be applied to the embedded text or image elements.

Tokens

Element	Token
icon	`color.fill.tertiary`
title	`color.text.primary`
text	`color.text.primary`
action	`color.state.active`
skeleton element	`color.fill.quaternary`

Full View

Use a Full View to communicate either the successful completion of a process, or a warning or error which the user needs to act upon before they can continue to complete the intended process.

This component blocks users from doing anything else until they interacted with it.
The primary action at the bottom should trigger the suggested action to resolve the current state.

Elements of a Full View alert:

Any icon from our library in XL size
A short title that summarizes the topic
A longer message that describes the issue to the user in more detail
A primary action (optional, in case a dismiss action is present)
A secondary action (optional)
A dismiss action at the top of the screen (optional, depending on the flow)

Rules For Android

Use the Composable FullView

Tokens

Element	Token
icon	`color.fill.mono`
title	`color.text.mono`
text	`color.text.mono`

Overlay

HUD iOS

An element that is rendered in the center of a screen, while the actual interface is dimmed by a translucent fill color. HUDs disapppear automatically after a defined time and cannot be dismissed by the user directly.

Until the HUD disappears, it blocks users from interacting with the underlying UI.

Spinner Android

Android doesn’t use HUDs like iOS does, but it can display a blocking loading state that features the default Android loading element. Optionally, the actual interface is dimmed by a translucent fill color.

Until the loading animation disappears, it blocks users from interacting with the underlying UI.

Rules For Android

Use Composable LoadingOverlay

Tokens

State	Token	Alternate Token
success	`color.state.positive`	-
error	`color.state.negative`	-
iOS loading	`color.state.info`	-
Android loading	`color.state.info`	`color.fill.mono`

Snackbar

A Snackbar displays a brief message about the result or the progress of an action at the bottom of the screen. It disappears automatically after a defined amount of time, and does not block users from interacting with the interface while it is present.

Don’t use Snackbars to communicate a major or critical status to the user. Use a Modal Alert or a Full View State instead.

Snackbars look differently on Android & iOS, because we use the native component on Android, whereas iOS uses a custom designed component.

Rules For Android

Set snackbarHostState on GeorgeScaffold with an instance you got via rememberSnackbarHostState().
Use LaunchedEffect with flows of SnackbarData to collect events and show the Snackbar.

Types

Success
This type of snackbar is purely informative, and doesn’t have an action that can be acted on by the user. Example use case: An item or action was saved successfully.

Error
This type of snackbar may contain a “Retry” action in combination with the text message.
Example use case: A non-critical action that was triggered by the user could not be completed.

Loading
A special variant of the snackbar, currently only used on iOS. To allow the user to continue interacting with the app while loading a specific kind of content, a Loading Snackbar can be used.

Tokens

State	Token
success	`color.state.positive`
error	`color.state.negative`
iOS loading	`color.state.info`
iOS text	`color.text.primary`
iOS action	`color.state.active`