2026-04-26 09:13:18 +08:00
|
|
|
import clsx from "clsx";
|
|
|
|
|
|
|
|
|
|
export function LoadingSignal({
|
|
|
|
|
title,
|
|
|
|
|
description,
|
|
|
|
|
compact = false,
|
|
|
|
|
}: {
|
|
|
|
|
title: string;
|
|
|
|
|
description?: string;
|
|
|
|
|
compact?: boolean;
|
|
|
|
|
}) {
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={clsx("scan-loading-signal", compact && "compact")}
|
|
|
|
|
role="status"
|
|
|
|
|
aria-live="polite"
|
|
|
|
|
>
|
2026-05-25 01:10:26 +08:00
|
|
|
<div className="scan-loading-spinner-wrapper" aria-hidden="true">
|
|
|
|
|
<div className="scan-loading-spinner-ring" />
|
|
|
|
|
<img
|
2026-05-25 02:29:04 +08:00
|
|
|
src="/apple-touch-icon.png"
|
2026-05-25 01:10:26 +08:00
|
|
|
alt="PolyWeather"
|
|
|
|
|
className="scan-loading-spinner-logo"
|
|
|
|
|
/>
|
2026-04-26 09:13:18 +08:00
|
|
|
</div>
|
|
|
|
|
<div className="scan-loading-copy-block">
|
|
|
|
|
<strong>{title}</strong>
|
|
|
|
|
{description ? <span>{description}</span> : null}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|