overleaf/services/web/frontend/js/shared/components/loading-branded.tsx
Alf Eaton 1ce16dd09f [ide-react] Handle failed socket.io loading (#16265)
GitOrigin-RevId: 3a460e1f53387e7012f994f6e8ea9ce764eb0fd2
2023-12-18 09:04:31 +00:00

37 lines
872 B
TypeScript

type LoadingBrandedTypes = {
loadProgress: number // Percentage
label?: string
hasError?: boolean
}
export default function LoadingBranded({
loadProgress,
label,
hasError = false,
}: LoadingBrandedTypes) {
return (
<>
<div className="loading-screen-brand-container">
<div
className="loading-screen-brand"
style={{ height: `${loadProgress}%` }}
/>
</div>
{!hasError && (
<div className="h3 loading-screen-label" aria-live="polite">
{label}
<span className="loading-screen-ellip" aria-hidden="true">
.
</span>
<span className="loading-screen-ellip" aria-hidden="true">
.
</span>
<span className="loading-screen-ellip" aria-hidden="true">
.
</span>
</div>
)}
</>
)
}