MultinaireLoading

Loading skeleton component for placeholder content during data fetching.

Basic Usage

import { MultinaireLoading } from '@multinaire/multinaire-design';

<MultinaireLoading 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

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

Avatar Placeholder

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

Card Placeholder

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

List Placeholders

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

With Flex

<MultinaireContainer horizontal gap={8}>
  <MultinaireLoading flex={1} height={100} />
  <MultinaireLoading flex={1} height={100} />
</MultinaireContainer>