new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

skeleton

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Skeleton component based on span element

The Skeleton component is based on the span element and supports common margin props.

Skeleton width and height props

Use the width and height props to manually control the size of the skeleton. Both props accept pixel values like '48px'.

Skeleton loading prop controls display state

The loading prop controls whether the skeleton or its children are displayed. When loading is true, the skeleton placeholder appears. When loading is false, the children are shown. The Skeleton component preserves the dimensions of children when they are hidden and disables interactive elements.

Skeleton with text wrapping best practice

When using Skeleton with text, wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size. Wrapping the Text element directly produces a smaller placeholder, while wrapping just the text content inside Text produces a placeholder that matches the text dimensions.

Skeleton basic usage example

Basic Skeleton usage: <Skeleton>Loading</Skeleton>. Renders a loading placeholder with text 'Loading'.

Skeleton with fixed dimensions example

Example of Skeleton with manual size control: <Skeleton width="48px" height="48px" />. Renders a 48x48 pixel placeholder.

Skeleton with loading state and interactive elements example

Example controlling Skeleton display with loading prop: <Flex gap="4"> <Skeleton loading={true}> <Switch defaultChecked /> </Skeleton> <Skeleton loading={false}> <Switch defaultChecked /> </Skeleton> </Flex> When loading={true}, the skeleton placeholder appears. When loading={false}, the Switch component is displayed.

Skeleton text wrapping examples

Two approaches for Skeleton with text: Approach 1 - wrap text node inside Text: <Text> <Skeleton>Lorem ipsum dolor sit amet.</Skeleton> </Text> Approach 2 - wrap Text element: <Skeleton> <Text>Lorem ipsum dolor sit amet</Text> </Skeleton> Approach 1 creates a placeholder that matches the text size. Approach 2 creates a smaller placeholder. Approach 1 is recommended for text content.

Give your agent this brain