Avatar RS trae componentes de avatar eficientes a Yew, Dioxus y Leptos
La librería de opensass envuelve Image RS para resolver carga diferida, respaldos y grupos apilados con una API idéntica en los tres frameworks WASM en Rust
Avatar RS es una librería de componentes para pintar avatares en aplicaciones WASM escritas en Rust con Yew, Dioxus o Leptos. La publica el colectivo opensass en el repositorio y va montada sobre Image RS, su primitiva de imagen nativa de WASM. El problema que ataca es aburrido pero universal: cada aplicación acaba reescribiendo la misma etiqueta img con borde redondeado a mano, lógica de respaldo y la esperanza de que la CDN no devuelva un 404.
La API se reparte en cinco componentes. Avatar es el contenedor, envuelve a Image y Fallback y comparte el contexto de carga entre ambos; si está dentro de un Group, hereda de ahí tamaño, color y variante. Fallback muestra iniciales o un icono mientras la imagen no llega, y acepta un delay_ms para retrasar su aparición: cuando la imagen suele cargar rápido, evita que las iniciales parpadeen y desaparezcan.
Image RS es la base y no es un detalle menor. Usa la Intersection Observer API para la carga diferida, soporta srcset y sizes para imágenes responsivas y dispara callbacks limpios de on_load y on_error. Todo eso lo hereda cualquier Image que se renderice, y la capa de avatar solo añade gestión de contexto y coordinación de estado encima.
La cuenta la lleva el contexto
Group apila varios avatares con solapamiento automático, un número máximo configurable y una insignia que indica cuántos quedan fuera. Se le pasan max y total, y con eso calcula overflow_count y lo inyecta en el contexto. Count lee ese valor de ahí cuando su propio prop count vale cero, que es lo predeterminado: la insignia no necesita saber nada explícito, solo mira el estado del grupo. Un único origen para el dato.
Las tres implementaciones exponen la misma superficie. Dioxus y Leptos tiran de use_context_provider y use_context según las convenciones de cada framework, pero el comportamiento es idéntico, incluido el delay_ms del respaldo y la integración con Image RS.
Un fallo de caché que pilló al equipo
En Yew, las imágenes renderizadas con Image a veces no aparecían tras un refresco suave de la página. Con refresco duro, sin problema. El motivo: cuando el navegador sirve una imagen desde caché, el evento de carga se dispara antes de que Yew haya enganchado su listener. El efecto ve estado de "cargando", la imagen ya terminó y el componente nunca salta a "cargada".
La solución pasa por inyectar un node_ref en el img subyacente y consultar img.complete al montar. Requiere añadir web-sys con la feature HtmlImageElement en el feature gate de Yew.
El interés de esto, más allá del componente en sí, es que Image RS empieza a comportarse como una pieza de infraestructura reutilizable dentro del ecosistema WASM en Rust: si resolvió bien la carga diferida y los callbacks, el siguiente componente que se apoye en ella hereda esos arreglos gratis. No hay fecha de estabilización ni nota de licencia en el anuncio, y el proyecto es joven, así que toca mirar el código antes de meterlo en producción.
