Skeleton

Skeleton is used to display the loading state of some component.

Import

import { Skeleton } from '@sajari-ui/core';

import { Skeleton } from '@sajari-ui/core';

Usage

You can use it as a standalone component

Editable Example

<Skeleton height="h-4" maxWidth="max-w-sm" width="w-full" margin="mx-auto"></Skeleton>

<Skeleton height="h-4" maxWidth="max-w-sm" width="w-full" margin="mx-auto"></Skeleton>

Or to wrap another component to take the same height and width

Editable Example

contents wrapped

won't be visible

<Skeleton>
  <div>contents wrapped</div>
  <div>won't be visible</div>
</Skeleton>

<Skeleton>
  <div>contents wrapped</div>
  <div>won't be visible</div>
</Skeleton>

Useful when fetching remote data

import { Box } from '@sajari-ui/core';

function Card() {
  const { data, loading, error } = useRemoteData();
  if (error) return <Box children="error" />;
  return (
    <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </Box>
  );
}

import { Box } from '@sajari-ui/core';
function Card() {
  const { data, loading, error } = useRemoteData();
  if (error) return <Box children="error" />;
  return (
    <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </Box>
  );
}

Example

You can use it as a standalone component

Editable Example

<Card maxWidth="max-w-sm" width="w-full" margin="mx-auto" overflow="overflow-hidden">
  <Skeleton height="h-48"></Skeleton>
  <Flex padding="p-6" flexDirection="flex-col" space="space-y-4">
    <Skeleton width="w-32" height="h-5" margin="mb-2"></Skeleton>
    <Skeleton height="h-2"></Skeleton>
    <Skeleton height="h-2"></Skeleton>
    <Skeleton height="h-2"></Skeleton>
  </Flex>
</Card>

<Card maxWidth="max-w-sm" width="w-full" margin="mx-auto" overflow="overflow-hidden">
  <Skeleton height="h-48"></Skeleton>
  <Flex padding="p-6" flexDirection="flex-col" space="space-y-4">
    <Skeleton width="w-32" height="h-5" margin="mb-2"></Skeleton>
    <Skeleton height="h-2"></Skeleton>
    <Skeleton height="h-2"></Skeleton>
    <Skeleton height="h-2"></Skeleton>
  </Flex>
</Card>

Skeleton color

You can change the background color with backgroundColor.

Editable Example

<Skeleton height="h-4" backgroundColor="bg-blue-100" />

<Skeleton height="h-4" backgroundColor="bg-blue-100" />