Skeleton

'use client'

import { HStack, Stack } from '@chakra-ui/react'
import { Skeleton, SkeletonCircle } from '@saas-ui/react'

export const SkeletonBasic = () => {
  return (
    <HStack gap="5">
      <SkeletonCircle size="12" />
      <Stack flex="1">
        <Skeleton height="5" />
        <Skeleton height="5" width="80%" />
      </Stack>
    </HStack>
  )
}

'use client'

import { HStack, Stack } from '@chakra-ui/react'
import { Skeleton, SkeletonCircle, SkeletonText } from '@saas-ui/react'

export const SkeletonForFeed = () => {
  return (
    <Stack gap="6" maxW="xs">
      <HStack width="full">
        <SkeletonCircle size="10" />
        <SkeletonText noOfLines={2} />
      </HStack>
      <Skeleton height="200px" />
    </Stack>
  )
}

'use client'

import { SkeletonText } from '@saas-ui/react'

export const SkeletonForText = () => {
  return <SkeletonText noOfLines={3} gap="4" />
}

'use client'

import { Badge, HStack } from '@chakra-ui/react'
import { Skeleton } from '@saas-ui/react'

export const SkeletonWithChildren = () => {
  return (
    <HStack gap="4">
      <Skeleton asChild loading={true}>
        <Badge>Select</Badge>
      </Skeleton>

      <Skeleton loading={false}>
        <Badge>Select</Badge>
      </Skeleton>
    </HStack>
  )
}

'use client'

import { HStack, Stack, Text } from '@chakra-ui/react'
import { Skeleton } from '@saas-ui/react'

export const SkeletonWithVariants = () => {
  return (
    <Stack gap="5">
      <HStack gap="5">
        <Text width="8ch">pulse</Text>
        <Skeleton flex="1" height="5" variant="pulse" />
      </HStack>
      <HStack gap="5">
        <Text width="8ch">shine</Text>
        <Skeleton flex="1" height="5" variant="shine" />
      </HStack>
    </Stack>
  )
}

'use client'

import { useState } from 'react'

import { Stack, Text } from '@chakra-ui/react'
import { Button, Skeleton } from '@saas-ui/react'

export const SkeletonWithLoaded = () => {
  const [loading, setLoading] = useState(true)

  return (
    <Stack align="flex-start" gap="4">
      <Skeleton height="6" loading={loading}>
        <Text>Chakra UI is cool</Text>
      </Skeleton>
      <Button size="sm" onClick={() => setLoading((c) => !c)}>
        Toggle
      </Button>
    </Stack>
  )
}