28 lines
664 B
TypeScript
28 lines
664 B
TypeScript
|
import * as React from "react"
|
||
|
|
|
||
|
|
import LogoMark from "../icons/LogoMark"
|
||
|
|
|
||
|
|
function Fallback() {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center p-8">
|
||
|
|
<LogoMark size={30} className="animate-[spin_2.5s_linear_infinite]" />
|
||
|
|
<span className="sr-only">Loading...</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
type LoadingProps = React.ComponentPropsWithoutRef<"div"> & {
|
||
|
|
loading: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Loading = React.forwardRef<HTMLDivElement, LoadingProps>(
|
||
|
|
function Loading(props, ref) {
|
||
|
|
const { loading, children, ...other } = props
|
||
|
|
return (
|
||
|
|
<div ref={ref} {...other}>
|
||
|
|
{loading ? <Fallback /> : children}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)
|