Card Skeleton

A PantrixCard whose content has not arrived: the card's own surface, with bars where its header, its body and its actions will be.

import com.pantrixui.components.container.card.PantrixCardSkeleton

• Three variants. variant says how the card is set apart from what it stands on: Elevated by a shadow, Filled by a fill, Outlined by a hairline.
• Slots. header stands above the body and footer below it; media is drawn above them all, edge to edge, and takes none of the card's padding. The lines of the body have the theme's small spacing (spacing.sm) between them.
• Height. A card given a height is filled by its body: the footer stands at the card's foot, and a child of the body given a weight takes the room between. The cards of a row are of one height this way.
• One button. Given onClick, the whole card is one button: a screen reader hears one target. A button in the footer keeps its own press.
• A card that cannot be pressed. A card that has onClick and whose enabled is false gives its content the theme's disabled colour; a child that sets a colour of its own keeps it.
• Content colour. On the theme's surface, that is, in an Elevated and an Outlined card, the card gives its content no colour: each child is drawn in its own default. A Filled card, and a card given a role's fill, gives the colour that reads on that fill.
• Colours of its own. CardColors gives the fill, the content's colour and the edge; one that is left out stays the variant's.
• Platform. The corners and the shadow depend on the platform (CardStyle): a medium corner and a 2dp shadow on Android, a large corner and no shadow on iOS, a small corner and a 1dp shadow on desktop and the web.
• Skeleton. PantrixCardSkeleton stands in for a card whose data has not arrived: the card's own surface, with bars in it where the header, the lines and the buttons will be. It is announced to a screen reader once, for the whole card.
• Automation. tagKey gives the card the tag Card_<tagKey>; a press is reported as a Card event, along with the card's variant.

Examples

Until the data arrives: the skeleton

Press "Refresh": for two seconds the two cards are replaced by their skeletons. PantrixCardSkeleton is not drawn to look like a card: it is built from the card's own shape, fill, shadow, padding and spacing. Its bars take the room of what they stand in for: when the data arrives the card's height does not change, and nothing below it moves.

The skeleton cannot know what is in the card: showHeader, lines, footerButtons and mediaHeight are given to match the card it stands in for. The first card has a header, one line and two buttons: lines = 1, footerButtons = 2.

The fill and the content colour of the "Campaign" card were given by the caller. Its skeleton takes the card's colours with colors too; its bars are drawn in the colour given with skeletonColors.

val own = ownColors()
val campaign = CardColors(container = own.container, content = own.onContainer)
var loading by remember { mutableStateOf(false) }
LaunchedEffect(loading) {
    if (loading) {
        delay(2_000)
        loading = false
    }
}
if (loading) {
    PantrixCardSkeleton(modifier = Modifier.fillMaxWidth(), lines = 1, footerButtons = 2)
} else {
    PantrixCard(
        modifier = Modifier.fillMaxWidth(),
        header = {
            PantrixText(
                text = "Order #1042",
                style = PantrixTheme.typography.title,
                role = TextRole.Heading(level = 3)
            )
        },
        footer = {
            PantrixButton(
                text = "Refresh",
                onClick = { loading = true },
                variant = ButtonVariant.Text,
                tagKey = "reload"
            )
            PantrixButton(text = "Track", onClick = {}, tagKey = "track")
        }
    ) {
        PantrixText(text = "Two items, delivery on Thursday")
    }
}
if (loading) {
    PantrixCardSkeleton(
        modifier = Modifier.fillMaxWidth(),
        variant = CardVariant.Filled,
        colors = campaign,
        skeletonColors = SkeletonColors(base = own.onContainer.copy(alpha = 0.3f), highlight = own.container),
        lines = 1
    )
} else {
    PantrixCard(
        modifier = Modifier.fillMaxWidth(),
        variant = CardVariant.Filled,
        colors = campaign,
        tagKey = "campaign"
    ) {
        PantrixText(text = "Campaign", style = PantrixTheme.typography.title)
        PantrixText(text = "Its fill and content colour were given by the caller")
    }
}

A loading list

A loading list: the skeletons of two outlined cards. mediaHeight stands in for the media the card will show, lines for the lines of the body, and footerButtons for the actions.

A skeleton that stands alone is announced to a screen reader once, for the whole card: with the theme's word, "Loading". Inside something that already says it is loading, this announcement is turned off: here the list says once that it is loading, and the skeletons were given contentDescription = null.

val loading = PantrixTheme.strings.loading
Column(
    modifier = Modifier.widthIn(max = 360.dp).semantics { contentDescription = loading },
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    repeat(2) {
        PantrixCardSkeleton(
            modifier = Modifier.fillMaxWidth(),
            variant = CardVariant.Outlined,
            lines = 2,
            footerButtons = 1,
            mediaHeight = 96.dp,
            contentDescription = null
        )
    }
}

API

modifier

A PantrixCard whose content has not arrived: the card's own surface, with bars where its header, its body and its actions will be.

CardStyle

PantrixCard's geometry: its corners, and the shadow of its elevated variant.

CardColors

What PantrixCard is painted with, for a card that does not take its variant's colours: a colour that is set is used, and one that is left out stays the variant's.