Loading
Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。
<Loading.Oval fontSize="3xl" />
使い方
import { Loading } from "@yamada-ui/react"
import { Loading } from "@/components/ui"
import { Loading } from "@workspaces/ui"
<Loading.Oval />
<Loading.Grid />
<Loading.Audio />
<Loading.Dots />
<Loading.Puff />
<Loading.Rings />
<Loading.Circles />
<Loading.Suspense />
バリアントを変更する
<Wrap gap="md">
<Loading.Oval color="red.500" fontSize="3xl" />
<Loading.Grid color="orange.500" fontSize="3xl" />
<Loading.Audio color="yellow.500" fontSize="3xl" />
<Loading.Dots color="green.500" fontSize="3xl" />
<Loading.Puff color="teal.500" fontSize="3xl" />
<Loading.Rings color="blue.500" fontSize="3xl" />
<Loading.Circles color="cyan.500" fontSize="3xl" />
</Wrap>
サイズを変更する
<Wrap gap="md">
<Loading.Oval color="red.500" fontSize="lg" />
<Loading.Grid color="orange.500" fontSize="xl" />
<Loading.Audio color="yellow.500" fontSize="2xl" />
<Loading.Dots color="green.500" fontSize="3xl" />
<Loading.Puff color="teal.500" fontSize="4xl" />
<Loading.Rings color="blue.500" fontSize="5xl" />
<Loading.Circles color="cyan.500" fontSize="6xl" />
</Wrap>
Suspenseを使う
const SuspendButton = ({ children }: { children: React.ReactNode }) => {
const [suspend, setSuspend] = useState(false)
if (suspend) {
throw new Promise((resolve) => {
setTimeout(() => {
setSuspend(false)
resolve()
}, 2000)
})
}
return (
<Button onClick={() => setSuspend(true)} w="full">
{children}
</Button>
)
}
return (
<Wrap gap="sm">
<For
each={Object.entries({
oval: "red.500",
grid: "orange.500",
audio: "yellow.500",
dots: "green.500",
puff: "teal.500",
rings: "blue.500",
circles: "cyan.500",
})}
>
{([loadingScheme, color]) => (
<Box key={loadingScheme} w="20" h="10">
<Loading.Suspense
loadingScheme={loadingScheme}
loadingProps={{ fontSize: "2xl", color }}
>
<SuspendButton>{loadingScheme}</SuspendButton>
</Loading.Suspense>
</Box>
)}
</For>
</Wrap>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。