server/assets/js/react/components/Loading.tsx

28 lines
664 B
TypeScript
Raw Normal View History

2023-12-04 13:42:32 +00:00
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>
)
}
)