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()