843895d876
* chore: fix some lint issues * feat: refactor contact list * feat: refactor relay hint * feat: add missing commands * feat: use new cache layer for react query * feat: refactor column * feat: improve relay hint * fix: replace break with continue in parser * refactor: publish function * feat: add reply command * feat: improve editor * fix: quote * chore: update deps * refactor: note component * feat: improve repost * feat: improve cache * fix: backup screen * refactor: column manager
48 lines
1.3 KiB
TypeScript
48 lines
1.3 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" }}
|
|
// biome-ignore lint/correctness/noConstantCondition: 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>
|
|
);
|
|
}
|