useProcessing
useProcessing is a custom hook for handling processing states.
const { loading, start, finish } = useProcessing()
const onClick = () => {
start()
setTimeout(() => finish(), 3000)
}
return (
<Button loading={loading} onClick={onClick}>
Click me
</Button>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { useProcessing } from "@yamada-ui/react"
import { useProcessing } from "@/components/ui"
import { useProcessing } from "@workspaces/ui"
const { loading, start, finish } = useProcessing()