a4aef25adb
* feat: redesign * feat: update other columns to new design * chore: small fixes * fix: better manage external webview * feat: redesign note * feat: update ui * chore: update * chore: update * chore: polish ui * chore: update auth ui * feat: finalize note design * chore: small fixes * feat: add window management in rust * chore: format * feat: update ui for event screen * feat: update event screen * feat: final
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { cn } from "@lume/utils";
|
|
import type { ReactNode } from "react";
|
|
|
|
export function Spinner({
|
|
children,
|
|
className,
|
|
}: {
|
|
children?: ReactNode;
|
|
className?: string;
|
|
}) {
|
|
const spinner = (
|
|
<span className={cn("block relative opacity-65 size-4", className)}>
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
<span className="spinner-leaf" />
|
|
</span>
|
|
);
|
|
|
|
if (children === undefined) return spinner;
|
|
|
|
return (
|
|
<div className="relative flex items-center justify-center">
|
|
<span>
|
|
{/**
|
|
* `display: contents` removes the content from the accessibility tree in some browsers,
|
|
* so we force remove it with `aria-hidden`
|
|
*/}
|
|
<span
|
|
aria-hidden
|
|
style={{ display: "contents", visibility: "hidden" }}
|
|
// Workaround to use `inert` until https://github.com/facebook/react/pull/24730 is merged.
|
|
{...{ inert: true ? "" : undefined }}
|
|
>
|
|
{children}
|
|
</span>
|
|
<div className="absolute flex items-center justify-center">
|
|
<span>{spinner}</span>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|