Skeleton

A Skeleton is a raised surface that pulses where content will be. It is hidden from assistive technology, since a reader has nothing to gain from “blank, blank, blank”, and it stops pulsing under reduced motion.

Finish loading

SkeletonDemo.tsx

import { Text, View } from '@hozo/core'
import { Button, Skeleton } from '@hozo/ui'
import { useState } from 'react'

export function SkeletonDemo() {
  const [loaded, setLoaded] = useState(false)
  return (
    <View className="gap-4">
      {loaded ? (
        <View className="flex-row items-center gap-3">
          <View className="size-10 rounded-full bg-hozo-accent" />
          <Text className="text-sm text-hozo-text">Ada Lovelace replied to your comment.</Text>
        </View>
      ) : (
        <View className="flex-row items-center gap-3">
          <Skeleton className="size-10 rounded-full" />
          <Skeleton className="h-4 w-64" />
        </View>
      )}
      <View className="flex-row">
        <Button size="sm" onPress={() => setLoaded((done) => !done)}>
          {loaded ? 'Show the placeholder' : 'Finish loading'}
        </Button>
      </View>
    </View>
  )
}

• className: sizes the box: size-10 rounded-full for an avatar, h-4 w-64 for a line of text. The pulse is a layer inside the box, so your classes size it and the animation is unaffected.
• Say that something is loading somewhere a reader does hear, such as a busy state on the region or an Alert when it is done. The skeleton says nothing.