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 value
margin	SpacingProps	-	Margin spacing
width	DimensionValue	'100%'	Skeleton width
height	DimensionValue	-	Skeleton height
borderRadius	BorderRadiusProps	-	Corner radius
backgroundColor	ColorKeys	-	Background color
style	ViewStyle	-	Additional styles

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>