useLoading

useLoadingは、アプリケーションのローディングを制御するカスタムフックです。

const { screen, page, background } = useLoading()

const onLoadingScreen = async () => {
  try {
    screen.start()

    await wait(3000)
  } finally {
    screen.finish()
  }
}

const onLoadingPage = async () => {
  try {
    page.start()

    await wait(3000)
  } finally {
    page.finish()
  }
}

const onLoadingBackground = async () => {
  try {
    background.start()

    await wait(3000)
  } finally {
    background.finish()
  }
}

return (
  <Wrap gap="md">
    <Button onClick={onLoadingScreen}>Start Screen Loading</Button>
    <Button onClick={onLoadingPage}>Start Page Loading</Button>
    <Button onClick={onLoadingBackground}>Start Background Loading</Button>
  </Wrap>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { useLoading } from "@yamada-ui/react"

import { useLoading } from "@/components/ui"

import { useLoading } from "@workspaces/ui"

const { screen, page, background } = useLoading()

useLoadingは、screen・page・backgroundのインスタンスを返します。インスタンスには、いくつかのメソッドが含まれています。

start: ローディングアニメーションを開始します。
update: ローディングアニメーションを更新します。
finish: ローディングアニメーションを終了します。
force: ローディングアニメーションを強制的に更新します。

ローディングスキームを変更する

const { screen, page, background } = useLoading()

return (
  <Wrap gap="md">
    <Button
      onClick={() => screen.start({ loadingScheme: "grid", duration: 3000 })}
    >
      Start Screen Loading
    </Button>
    <Button
      onClick={() => page.start({ loadingScheme: "dots", duration: 3000 })}
    >
      Start Page Loading
    </Button>
    <Button
      onClick={() =>
        background.start({ loadingScheme: "puff", duration: 3000 })
      }
    >
      Start Background Loading
    </Button>
  </Wrap>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

所要時間を設定する

所要時間を設定する場合は、durationに数値(ミリ秒)を設定します。

const { screen, page, background } = useLoading()

return (
  <Wrap gap="md">
    <Button onClick={() => screen.start({ duration: 3000 })}>
      Start Screen Loading
    </Button>
    <Button onClick={() => page.start({ duration: 3000 })}>
      Start Page Loading
    </Button>
    <Button onClick={() => background.start({ duration: 3000 })}>
      Start Background Loading
    </Button>
  </Wrap>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

メッセージを設定する

メッセージを設定する場合は、messageにReactNodeを設定します。

const { screen, page, background } = useLoading()

return (
  <Wrap gap="md">
    <Button
      onClick={() => screen.start({ message: "Loading", duration: 3000 })}
    >
      Start Screen Loading
    </Button>
    <Button onClick={() => page.start({ message: "Loading", duration: 3000 })}>
      Start Page Loading
    </Button>
    <Button
      onClick={() => background.start({ message: "Loading", duration: 3000 })}
    >
      Start Background Loading
    </Button>
  </Wrap>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

メッセージを更新する

メッセージを更新する場合は、updateを使用します。

const { screen, page, background } = useLoading()

const onLoadingScreen = async () => {
  try {
    screen.start({ message: "Loading" })

    await wait(3000)

    screen.update({ message: "Please Wait" })

    await wait(3000)
  } finally {
    screen.finish()
  }
}

const onLoadingPage = async () => {
  try {
    page.start({ message: "Loading" })

    await wait(3000)

    page.update({ message: "Please Wait" })

    await wait(3000)
  } finally {
    page.finish()
  }
}

const onLoadingBackground = async () => {
  try {
    background.start({ message: "Loading" })

    await wait(3000)

    background.update({ message: "Please Wait" })

    await wait(3000)
  } finally {
    background.finish()
  }
}

return (
  <Wrap gap="md">
    <Button onClick={onLoadingScreen}>Start Screen Loading</Button>
    <Button onClick={onLoadingPage}>Start Page Loading</Button>
    <Button onClick={onLoadingBackground}>Start Background Loading</Button>
  </Wrap>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

コンフィグ

ローディングスキームを変更する

const config = extendConfig({
  loading: {
    background: { loadingScheme: "puff" },
    page: { loadingScheme: "dots" },
    screen: { loadingScheme: "grid" },
  },
})

const App: FC = () => {
  const { screen, page, background } = useLoading()

  return (
    <Wrap gap="md">
      <Button onClick={() => screen.start({ duration: 3000 })}>
        Start Screen Loading
      </Button>
      <Button onClick={() => page.start({ duration: 3000 })}>
        Start Page Loading
      </Button>
      <Button onClick={() => background.start({ duration: 3000 })}>
        Start Background Loading
      </Button>
    </Wrap>
  )
}

return (
  <UIProvider config={config}>
    <App />
  </UIProvider>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。