Skeleton
콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.
@seed-design/react@0.0.1, @seed-design/css@0.0.1
import { Skeleton, VStack } from "@seed-design/react";
export default function SkeletonPreview() {
return (
<VStack gap="x4" align="center">
<Skeleton radius="full" width="x12" height="x12" />
<VStack direction="column" gap="x2">
<Skeleton radius="8" height="x4" width="250px" />
<Skeleton radius="8" height="x4" width="250px" />
</VStack>
</VStack>
);
}
import { Skeleton } from "@seed-design/react";
height?ResponsiveValue<UnwrapResponsive<ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})> | undefined> | "lineHeight.t1" | "lineHeight.t2" | "lineHeight.t3" | "lineHeight.t4" | "lineHeight.t5" | "lineHeight.t6" | "lineHeight.t7" | "lineHeight.t8" | "lineHeight.t9" | "lineHeight.t10" | "lineHeight.t11" | "lineHeight.t12" | "lineHeight.t13" | "lineHeight.t14" | "lineHeight.t1Static" | "lineHeight.t2Static" | "lineHeight.t3Static" | "lineHeight.t4Static" | "lineHeight.t5Static" | "lineHeight.t6Static" | "lineHeight.t7Static" | "lineHeight.t8Static" | "lineHeight.t9Static" | "lineHeight.t10Static" | "lineHeight.t11Static" | "lineHeight.t12Static" | "lineHeight.t13Static" | "lineHeight.t14Static">
width?ResponsiveValue<Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full" | (string & {})> | undefined
텍스트를 대체하는 Skeleton에는 height="lineHeight.t4"처럼 텍스트와 같은 line-height 토큰을 지정할 수 있습니다.
import { Skeleton, Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function SkeletonLineHeight() {
const [loading, setLoading] = useState(true);
return (
<VStack gap="x4" align="center">
<VStack gap="x2" alignItems="flex-start">
{loading ? (
<Skeleton height="lineHeight.t7" width="200px" />
) : (
<Text textStyle="t7Bold">콘텐츠 제목</Text>
)}
{loading ? (
<Skeleton height="lineHeight.t4" width="250px" />
) : (
<Text textStyle="t4Regular">불러온 콘텐츠입니다.</Text>
)}
</VStack>
<Switch label="로딩 중" checked={loading} onCheckedChange={setLoading} />
</VStack>
);
}
반응형 높이에도 사용할 수 있습니다.
<Skeleton height={{ base: "lineHeight.t4", md: "lineHeight.t5" }} width="full" />
import { Flex, Skeleton } from "@seed-design/react";
export default function SkeletonRadius() {
return (
<Flex gap="x4" align="center">
<Skeleton radius="0" width="x12" height="x12" />
<Skeleton radius="8" width="x12" height="x12" />
<Skeleton radius="16" width="x12" height="x12" />
<Skeleton radius="full" width="x12" height="x12" />
</Flex>
);
}
import { Box, Skeleton, VStack } from "@seed-design/react";
export default function SkeletonTone() {
return (
<VStack gap="x4" alignItems="flex-start" width="full">
<Skeleton tone="neutral" radius="16" width="full" height="x12" />
<Skeleton tone="magic" radius="16" width="full" height="x12" />
</VStack>
);
}