Source

// The shape of a document page while it opens, so nothing jumps when the real page arrives.
export function PageSkeleton({ side = false, label = "Opening the document" }: { side?: boolean; label?: string }) {
  return (
    <div className="doc" aria-busy="true" aria-label={label}>
      <header className="doc-head">
        <div className="wrap doc-head-inner">
          <div className="grow">
            <span className="skeleton" style={{ width: 90, height: 11 }} />
            <span className="skeleton" style={{ width: "min(420px, 80%)", height: 34, marginTop: 12 }} />
          </div>
        </div>
      </header>
      <div className={`wrap ${side ? "doc-body" : "sign-body"}`}>
        {side && (
          <aside className="doc-side">
            <div className="card side-card">
              <span className="skeleton" style={{ width: 110, height: 18 }} />
              <span className="skeleton skeleton-text" />
              <span className="skeleton skeleton-text" />
            </div>
          </aside>
        )}
        <div className="doc-pages"><PagePlaceholder /></div>
      </div>
      <span className="sr-only" role="status">{label}</span>
    </div>
  );
}

/** A blank, Letter-shaped page. */
export function PagePlaceholder() {
  return <div className="page page-placeholder" aria-hidden="true"><span className="skeleton" /></div>;
}