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"をファイルの上部に追加する必要があります。