65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { memo } from "react"
|
|
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
|
|
import {
|
|
docsLoadingPhaseLabel,
|
|
type DocsLoadingPhase,
|
|
} from "@/lib/drive/docs-loading-phase"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function DocsLoadingSplash({
|
|
phase = "connecting",
|
|
title,
|
|
className,
|
|
overlay = false,
|
|
}: {
|
|
phase?: DocsLoadingPhase
|
|
title?: string
|
|
className?: string
|
|
/** Keep the same splash mounted as an overlay while the editor loads underneath. */
|
|
overlay?: boolean
|
|
}) {
|
|
const subtitle = docsLoadingPhaseLabel(phase)
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"docs-loading-splash",
|
|
overlay && "docs-loading-splash--overlay",
|
|
className
|
|
)}
|
|
role="status"
|
|
aria-live="polite"
|
|
aria-label={subtitle}
|
|
data-drive-app
|
|
>
|
|
<div className="docs-loading-splash__aurora" aria-hidden />
|
|
<div className="docs-loading-splash__grain" aria-hidden />
|
|
<div className="docs-loading-splash__content">
|
|
<div className="docs-loading-splash__pill">ULTIDOCS</div>
|
|
<img
|
|
src={suitePublicAsset("/ultidrive-mark.svg")}
|
|
alt=""
|
|
className="docs-loading-splash__mark"
|
|
width={56}
|
|
height={56}
|
|
decoding="async"
|
|
draggable={false}
|
|
/>
|
|
{title ? (
|
|
<p className="docs-loading-splash__title" title={title}>
|
|
{title}
|
|
</p>
|
|
) : null}
|
|
<p className="docs-loading-splash__subtitle">{subtitle}</p>
|
|
<div className="docs-loading-splash__loader" aria-hidden>
|
|
<span />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const MemoDocsLoadingSplash = memo(DocsLoadingSplash)
|