Chapter 14: Avatar

Core Idea

A minimal two-part image-with-fallback component: Image renders the picture, Fallback shows automatically (after an optional delay) whenever the image is missing or fails to load — no manual onError state juggling required.

Key Concepts

• Anatomy: Root → Image (src), Fallback (children shown as fallback, e.g. initials).
• Image.onLoadingStatusChange: callback for reacting to load-state transitions yourself, in addition to the automatic fallback behavior.
• Fallback.delay: delays showing the fallback by N ms — avoids a flash of initials while a fast-loading image is still in flight.

Reference Tables

Part	Notable props	Notable data attributes
Image	onLoadingStatusChange	data-starting-style, data-ending-style
Fallback	delay	—

Key Takeaways

1. Always set Fallback.delay (e.g. 200–600ms) in lists of avatars fetched over the network — prevents a flicker of initials before each image finishes loading.
2. No CSS variables or complex state — Avatar is the simplest component in the library; reach for it as-is rather than building a custom image-with-fallback wrapper.

Connects To

• ch005 (Styling): standard className/style/data-* styling contract, nothing Avatar-specific beyond the two attributes above.