@openproject/primer-view-components
Version:
ViewComponents of the Primer Design System for OpenProject
29 lines (28 loc) • 1.08 kB
TypeScript
/**
* AvatarFallbackElement implements "fallback first" loading pattern:
* 1. Fallback SVG is rendered immediately as <img> src
* 2. Real avatar URL is test-loaded in background using new Image()
* 3. On success, swaps to real image; on failure, fallback stays visible
*
* This approach prevents flicker by never showing a broken image state.
* Inspired by OpenProject's Angular PrincipalRendererService.
*
* Note: We read attributes directly via getAttribute() instead of using @attr
* due to a Catalyst bug where @attr accessors aren't properly initialized
* when elements have pre-existing attribute values.
*/
export declare class AvatarFallbackElement extends HTMLElement {
private img;
private testImage;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* Test-loads the real avatar URL in background.
* On success, swaps the visible img to the real URL.
* On failure, does nothing - fallback stays visible.
*/
private testLoadImage;
private applyColor;
private valueHash;
private updateSvgColor;
}