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="80" />
      <Skeleton circle h="64" />
    </Flex>
  );
}

#
Children

Use children to insert things such as icons or graphics.

import { Skeleton } from "@optiaxiom/react";
import { IconUserFilled } from "@tabler/icons-react";
 
export function App() {
  return (
    <Skeleton circle h="64" p="xs">
      <IconUserFilled />
    </Skeleton>
  );
}

#
Dimensions

Skeleton is automatically sized according to it’s children 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";
 
function Demo({ loading }: { loading?: boolean }) {
  return (
    <Flex>
      <Heading>{loading ? <Skeleton /> : "h1"}</Heading>
      <Heading appearance="h3">{loading ? <Skeleton /> : "h3"}</Heading>
      <Text>{loading ? <Skeleton /> : "body"}</Text>
    </Flex>
  );
}
 
export function App() {
  return (
    <Grid gridTemplateColumns="2" w="full">
      <Demo loading />
      <Demo />
    </Grid>
  );
}

#
Example

import { Box, Flex, Grid, Skeleton } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box bg="surface" maxW="sm" p="md" rounded="sm" shadow="sm" w="full">
      <Flex flexDirection="row">
        <Skeleton circle h="80" />
        <Flex flex="1">
          <Grid gridTemplateColumns="3">
            <Skeleton gridColumn="2" />
            <Skeleton gridColumn="1" />
          </Grid>
          <Skeleton />
        </Flex>
      </Flex>
    </Box>
  );
}

#
Props

#
`Skeleton`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
circle	`false \| true` Render skeleton as a circle if `true`. Will set the width to be the same as the height.
h	`any` Control the height of the skeleton - or both width and height if `circle` is also set to true.

Name

Type

asChild

false | true

circle

false | true

Render skeleton as a circle if true. Will set the width to be the same as the height.

any

Control the height of the skeleton - or both width and height if circle is also set to true.

#
Changelog

#
0.1.0

Added component

Progress Toast