みてるぞ
797e67ac37
#139 #139 #139 #139 #139 Merge branch 'feature/140' into feature/139 Merge remote-tracking branch 'origin/main' into feature/139 #140 Merge remote-tracking branch 'origin/main' into feature/140 Merge remote-tracking branch 'origin/main' into feature/140 #140 ぼちぼち Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #139 アニメーション Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #252
47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { create } from 'zustand'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
type OverlayStore = {
|
|
active: boolean
|
|
setActive: (v: boolean) => void }
|
|
|
|
|
|
export const useOverlayStore = create<OverlayStore> (set => ({
|
|
active: false,
|
|
setActive: v => set ({ active: v }) }))
|
|
|
|
|
|
export default (() => {
|
|
const active = useOverlayStore (s => s.active)
|
|
|
|
useEffect (() => {
|
|
if (active)
|
|
{
|
|
document.body.style.overflow = 'hidden'
|
|
document.body.setAttribute ('aria-busy', 'true')
|
|
}
|
|
else
|
|
{
|
|
document.body.style.overflow = ''
|
|
document.body.removeAttribute ('aria-busy')
|
|
}
|
|
}, [active])
|
|
|
|
if (!(active))
|
|
return null
|
|
|
|
return (
|
|
<div
|
|
role="progressbar"
|
|
aria-label="Loading"
|
|
className="fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm pointer-events-auto">
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="rounded-2xl bg-black/60 text-white px-6 py-3 text-sm">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
}) satisfies FC
|