tdn-busy-loader

Paquete: @tiendana/ngx-core/ui

Indica que un control está trabajando sin quitarle su etiqueta: el spinner en línea del sistema de diseño, un glifo animado que ocupa el lugar del icono del control, o de su button-icon-cover, mientras corre una petición. Úselo dentro de un botón, un chip o un campo cuyo texto debe seguir visible durante la espera.

Disponible desde @tiendana/ngx-core 0.8.11.

Para una pantalla de ingreso de código en espera de verificación use tdn-code-checking; para una lista o panel completo que carga use el esqueleto .content-placeholder del sistema de diseño; para un estado que se le debe comunicar al usuario use tdn-status con live.

Características

✅ Dos ubicaciones: el lugar de un icono de 24px (glyph) o el de un button-icon-cover (cover)
✅ Sin mover nada: el botón y su etiqueta conservan su tamaño al intercambiarse
✅ Esquema oscuro: dos glifos SVG y la elección según el fondo
✅ Sin assets en la app: los glifos se cargan por CDN con cfSrc

Selector

tdn-busy-loader

API

Inputs

Input	Tipo	Default	Descripción
place	'glyph' | 'cover'	'glyph'	Qué lugar ocupa: un icono de 24px, o la caja de 21×32 de un button-icon-cover
ground	'page' | 'natura'	'page'	Qué hay detrás, lo que decide el color del glifo en el esquema oscuro

Sin outputs ni contenido proyectado.

Tipos TdnBusyLoaderPlace y TdnBusyLoaderGround

export type TdnBusyLoaderPlace = 'glyph' | 'cover';
export type TdnBusyLoaderGround = 'page' | 'natura';

place

• glyph: toma el lugar de un icono de 24px (un mat-icon, el icono final de un campo); se redimensiona con --busy-loader-size.
• cover: toma el lugar de un button-icon-cover dentro de un .bttn, conservando su caja para que ni el botón ni su etiqueta se muevan al intercambiarlos. Mide 28×28 con márgenes que replican la huella del cover. El tamaño de .bttn--small no está cubierto.

ground

• page: el fondo de la página o tarjeta, como tras un botón outlined, de texto o un campo. Glifo oscuro en el esquema claro y blanco en el oscuro.
• natura: un relleno natura, como dentro de .bttn--primary. --color-natura conserva su valor en el esquema oscuro, así que el glifo se mantiene oscuro en ambos.

Propiedades CSS

Propiedad	Default	Descripción
--busy-loader-size	24px	Ancho y alto del slot glyph. Lo ignora place="cover"

Clase del host: tdn-busy-loader--cover cuando place es cover. Elementos internos: .tdn-busy-loader__glyphs (con --natura) y .tdn-busy-loader__glyph (con --dark y --light).

Tema

Dos glifos SVG se cargan por CDN con cfSrc: assets/images/input-loader-dark.svg y input-loader-white.svg. Bajo un ancestro con .scheme-dark se muestra el blanco con ground="page"; ground="natura" mantiene el oscuro en ambos esquemas.

Accesibilidad

Es puramente decorativo: el host es aria-hidden="true" y sus imágenes tienen alt vacío. El estado ocupado debe llevarlo el propio control: ponga [attr.aria-busy] en el botón, conserve su texto, y deshabilite o proteja la acción para que una segunda pulsación no envíe la petición dos veces.

Trampas que fallan sin error

• El glifo se elige por ground y no midiendo el fondo: un loader dentro de un .bttn--primary que se deja en page se vuelve blanco sobre natura en el esquema oscuro y desaparece.
• La caja de cover coincide solo con el button-icon-cover regular; dentro de .bttn--small resulta demasiado grande.

Ejemplos y Demos

Cargando demo...

Ver código