Animate

Loading skeleton component for placeholder content during data fetching.

Basic Usage

import { Animate } from '@multinaire/ui';

<Animate height={40} />

Props

Prop	Type	Default	Description
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
width	DimensionValue	'100%'	Fixed width of the skeleton
height	DimensionValue	—	Fixed height of the skeleton
borderRadius	BorderRadiusProps	—	Corner radius of the skeleton
backgroundColor	ColorKeys	—	Background color key from the active theme palette
style	ViewStyle	—	Additional styles applied to the skeleton

Examples

Text Placeholder

<Animate width={200} height={20} borderRadius={4} />

Avatar Placeholder

<Animate width={48} height={48} borderRadius={24} />

Card Placeholder

<Animate width="100%" height={120} borderRadius={8} />

List Placeholders

<Container gap={12}>
  {[1, 2, 3].map((i) => (
    <Container key={i} horizontal gap={12} alignItems="center">
      <Animate width={48} height={48} borderRadius={24} />
      <Container flex={1} gap={8}>
        <Animate height={16} borderRadius={4} />
        <Animate width="60%" height={12} borderRadius={4} />
      </Container>
    </Container>
  ))}
</Container>

With Flex

<Container horizontal gap={8}>
  <Animate flex={1} height={100} />
  <Animate flex={1} height={100} />
</Container>