Usage

Import

import { Skeleton } from '@passfort/castle'
content_copy
Copy

Example

You can use it as a standalone component.

<Stack>
  <Skeleton height={8} />
  <Skeleton height={8} />
  <Skeleton height={16} />
</Stack>
<Stack>
  <Skeleton height={8} />
  <Skeleton height={8} />
  <Skeleton height={16} />
</Stack>
content_copy
Copy
live example

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

<Skeleton>
  <Box height={16}></Box>
</Skeleton>
<Skeleton>
  <Box height={16}></Box>
</Skeleton>
content_copy
Copy
live example

Circle and Text Skeleton

import { SkeletonCircle } from '@passfort/castle'
content_copy
Copy

<Box padding={4} boxShadow="lg" bg="white">
  <SkeletonCircle size="10" />
  <SkeletonText mt="4" noOfLines={4} spacing="4" />
</Box>
<Box padding={4} boxShadow="lg" bg="white">
  <SkeletonCircle size="10" />
  <SkeletonText mt="4" noOfLines={4} spacing="4" />
</Box>
content_copy
Copy
live example

Skipping the skeleton when content is loaded

<Skeleton isLoaded>
  <Text>Your content here</Text>
</Skeleton>
<Skeleton isLoaded>
  <Text>Your content here</Text>
</Skeleton>
content_copy
Copy
live example