Skeleton

Stable

Placeholder shimmer component used while loading content.

Installation

npm install @xaui/native

Import

import { Skeleton } from '@xaui/native/skeleton'

Basic Usage

Minimal example showing the component with its default configuration.

import { Skeleton } from '@xaui/native/skeleton'

export function Example() {
  return <Skeleton />
}

Text Lines

Use multiple line placeholders for text content.

import { Skeleton } from '@xaui/native/skeleton'
import { Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function SkeletonTextLinesExample() {
  const isLoaded = false

  return (
    <Column gap={8}>
      <Skeleton isLoaded={isLoaded} width="100%" height={14}>
        <Typography>Account summary</Typography>
      </Skeleton>
      <Skeleton isLoaded={isLoaded} width="82%" height={14}>
        <Typography>Available balance</Typography>
      </Skeleton>
      <Skeleton isLoaded={isLoaded} width="68%" height={14}>
        <Typography>Updated 2 minutes ago</Typography>
      </Skeleton>
    </Column>
  )
}

Avatar Row

Compose circle + text skeletons for list items.

import { Skeleton } from '@xaui/native/skeleton'
import { Row, Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function SkeletonAvatarRowExample() {
  const isLoaded = false

  return (
    <Row spacing={12} crossAxisAlignment="center">
      <Skeleton isLoaded={isLoaded} width={48} height={48} radius="full">
        <View style={{ width: 48, height: 48, borderRadius: 999, backgroundColor: '#6366f1' }} />
      </Skeleton>
      <Column gap={8} style={{ flex: 1 }}>
        <Skeleton isLoaded={isLoaded} width="70%" height={14}>
          <Typography>Jamie Park</Typography>
        </Skeleton>
        <Skeleton isLoaded={isLoaded} width="45%" height={14}>
          <Typography>Online now</Typography>
        </Skeleton>
      </Column>
    </Row>
  )
}

Card Placeholder

Build a full loading card with mixed block shapes.

import { Skeleton } from '@xaui/native/skeleton'
import { Column } from '@xaui/native/view'

export function SkeletonCardExample() {
  const isLoaded = false

  return (
    <Column gap={10}>
      <Skeleton isLoaded={isLoaded} width="100%" height={140} radius="lg">
        <></>
      </Skeleton>
      <Skeleton isLoaded={isLoaded} width="60%" height={18} />
      <Skeleton isLoaded={isLoaded} width="90%" height={14} />
      <Skeleton isLoaded={isLoaded} width="75%" height={14} />
    </Column>
  )
}

Loaded State Toggle

Swap skeleton to real content using isLoaded.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { Skeleton } from '@xaui/native/skeleton'
import { Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function SkeletonLoadedStateExample() {
  const [isLoaded, setIsLoaded] = useState(false)

  return (
    <Column gap={10}>
      <Button size="sm" variant="bordered" onPress={() => setIsLoaded(v => !v)}>
        {isLoaded ? 'Show Skeleton' : 'Show Loaded Content'}
      </Button>
      <Skeleton isLoaded={isLoaded} width="100%" height={18}>
        <Typography variant="titleMedium">Revenue this month: $12,430</Typography>
      </Skeleton>
    </Column>
  )
}

Custom Color and Static

Customize skeleton color and disable animation.

import { Skeleton } from '@xaui/native/skeleton'
import { Column } from '@xaui/native/view'

export function SkeletonCustomStyleExample() {
  return (
    <Column gap={10}>
      <Skeleton
        isLoaded={false}
        width="100%"
        height={64}
        radius="lg"
        skeletonColor="#bae6fd"
      >
        <></>
      </Skeleton>
      <Skeleton
        isLoaded={false}
        width="100%"
        height={16}
        radius="full"
        disableAnimation
      >
        <></>
      </Skeleton>
    </Column>
  )
}