Skeleton

Display placeholder content while data is loading.

#
Documentation

#
Usage

import { Flex, Skeleton } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex w="full">
      <Skeleton />
      <Skeleton h="56" />
      <Skeleton circle size="56" />
    </Flex>
  );
}

#
Children

Use children to insert things such as icons or graphics.

import { Avatar, Skeleton } from "@optiaxiom/react";
 
export function App() {
  return (
    <Skeleton>
      <Avatar />
    </Skeleton>
  );
}

#
Dimensions

Skeleton is automatically sized according to the parent font-size/line-height styles so we can combine it with Text or Heading component to achieve correctly sized textual placeholders.

h1

h3

body

import { Flex, Grid, Heading, Skeleton, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gridTemplateColumns="2" w="full">
      <Demo loading />
      <Demo />
    </Grid>
  );
}
 
function Demo({ loading }: { loading?: boolean }) {
  return (
    <Flex>
      <Heading>{loading ? <Skeleton /> : "h1"}</Heading>
      <Heading level="3">{loading ? <Skeleton /> : "h3"}</Heading>
      <Text>{loading ? <Skeleton /> : "body"}</Text>
    </Flex>
  );
}

#
Example

import { Avatar, Box, Flex, Heading, Skeleton, Text } from "@optiaxiom/react";
 
export function App({ loading = true }: { loading: boolean }) {
  return (
    <Box bg="bg.default" maxW="sm" p="16" rounded="sm" shadow="sm" w="full">
      <Flex alignItems="start" flexDirection="row">
        {loading ? (
          <Skeleton>
            <Avatar size="lg" />
          </Skeleton>
        ) : (
          <Avatar name="Sample Person" size="lg" />
        )}
 
        <Flex flex="1">
          <Heading level="3">
            {loading ? <Skeleton /> : "Lorem ipsum dolor"}
          </Heading>
          <Text asChild fontSize="sm">
            <span>{loading ? <Skeleton w="1/3" /> : "Nullam rhoncus"}</span>
          </Text>
          <Text>
            {loading ? <Skeleton /> : "Phasellus efficitur feugiat luctus et."}
          </Text>
        </Flex>
      </Flex>
    </Box>
  );
}

#
Related

Progress

Display feedback on status of task or length of a process.

Spinner

Used for indicating an unspecified wait time.

#
Props

#
Skeleton

Supports all Box props in addition to its own. Renders a <span> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true Default: true
circle Render skeleton as a circle if `true`. false \| true
className string

#
Changelog

#
0.1.0

Added component

Sidenav ALPHA

Spinner