Skeleton

import { Box, HStack, Skeleton, VStack } from "astralis-ui";

export function SkeletonDemo() {
  return (
    <Box w="sm" maxW="full">
      <HStack gap="4" alignItems="center">
        <Skeleton variant="circle" w="12" h="12" shrink="0" />
        <VStack gap="2" alignItems="stretch" flex="1">
          <Skeleton variant="text" w="3/4" />
          <Skeleton variant="text" />
        </VStack>
      </HStack>
      <Skeleton variant="rect" mt="4" h="24" />
    </Box>
  );
}

"use client";

import { useState } from "react";
import { Avatar, Box, Button, HStack, Skeleton, Text, VStack } from "astralis-ui";

export function SkeletonLoaded() {
  const [loaded, setLoaded] = useState(false);

  return (
    <VStack gap="4" alignItems="start">
      <Box w="sm" maxW="full">
        <HStack gap="4" alignItems="center">
          <Skeleton variant="circle" loaded={loaded} w="12" h="12" shrink="0">
            <Avatar name="Nova Starling" />
          </Skeleton>
          <VStack gap="1" alignItems="stretch" flex="1">
            <Skeleton variant="text" loaded={loaded} w="1/2">
              <Text weight="semibold">Nova Starling</Text>
            </Skeleton>
            <Skeleton variant="text" loaded={loaded}>
              <Text size="sm" color="muted">Mission specialist · Astralis Station</Text>
            </Skeleton>
          </VStack>
        </HStack>
      </Box>
      <Button size="sm" variant="subtle" onClick={() => setLoaded((v) => !v)}>
        {loaded ? "Show skeleton" : "Finish loading"}
      </Button>
    </VStack>
  );
}