OudsSkeleton

A skeleton is a UI element that indicates when content is loading. The skeleton enhances user experience by temporarily replacing content with gray areas or animations that simulate the visual structure of the forthcoming content.

This is the atomic skeleton component that renders a standalone skeleton rectangle. For applying skeleton state to OUDS components, there are several ways to display skeletons:

Atomic skeleton (this component) - Standalone skeleton rectangle:

OudsSkeleton(modifier = Modifier.size(200.dp, 62.dp))

Component skeleton parameter - Individual component skeletons:

OudsButton(
    label = "Click me",
    onClick = {},
    skeleton = OudsSkeleton(rememberOudsSkeletonState())
)

Skeleton provider - Convenient for displaying multiple skeletons:

OudsSkeletonProvider(skeleton = OudsSkeleton(rememberOudsSkeletonState())) {
    OudsButton(label = "Click me", onClick = {})
    OudsTag(label = "Tag")
}

Design

Parameters

See also

Samples

OudsSkeleton(
    modifier = Modifier.size(200.dp, 62.dp)
)

val state = rememberOudsSkeletonState()
LaunchedEffect(state) {
    delay((OudsSkeletonState.AnimationDuration * 5L).milliseconds)
    state.stopAnimation()
}
OudsSkeleton(
    modifier = Modifier.size(200.dp, 62.dp),
    state = state
)