Carga de mapa.

<section class="ui-sample ui-feedback" data-map-loading="true" role="status"><span class="badge">En curso</span> <strong>Cargando geometrías</strong><p>Fuente: IDE Chile.</p><button class="btn btn--secondary" type="button">Cancelar</button></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-loading="true" role="status"><span class="badge">En curso</span> <strong>Cargando geometrías</strong><p>Fuente: IDE Chile.</p><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Cancelar</button></section>

import type { MouseEventHandler } from "react";

export interface MapLoadingProps {
  /** Qué se está cargando, en gerundio («Cargando geometrías»). */
  title?: string;
  /** De dónde vienen los datos o qué se conserva mientras cargan; vacío lo omite. */
  description?: string;
  /** Texto de la insignia de estado antes del título («En curso»); vacío la oculta. */
  statusLabel?: string;
  /** Texto del botón que cancela la carga; vacío lo oculta. */
  cancelLabel?: string;
  /** Se llama al pulsar el botón de cancelar. */
  onCancel?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Aviso que se muestra en un mapa mientras cargan sus geometrías o capas, con la fuente o lo que se conserva y un botón para cancelar.
 *
 * Usa `role="status"`: el lector de pantalla anuncia el cambio sin mover el foco. La insignia de `statusLabel` dice el estado en texto; cancelar es una acción secundaria (`btn--secondary`).
 *
 * @example <MapLoading title="Cargando geometrías" description="Conservamos la vista anterior." onCancel={cancelar} />
 */
export function MapLoading({
  title = "Cargando geometrías",
  description = "Fuente: IDE Chile.",
  statusLabel = "En curso",
  cancelLabel = "Cancelar",
  onCancel,
  className,
}: MapLoadingProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-map-loading role="status">
      {statusLabel ? <span className="badge">{statusLabel}</span> : null}
      {statusLabel && title ? " " : null}
      {title ? <strong>{title}</strong> : null}
      {description ? <p>{description}</p> : null}
      {cancelLabel ? <button className="btn btn--secondary" type="button" onClick={onCancel}>{cancelLabel}</button> : null}
    </section>
  );
}