avatar: Show placeholder on image load error

[vinodsingh-dev-gsoc]

Fixes #1558.
This change improves the user experience by displaying a consistent placeholder when an avatar image fails to load from its URL.
Adds an errorBuilder to the AvatarImage widget and includes a test case to verify the new behavior.
Co-authored-by: Chris Bobbe [email protected]

[chrisbobbe]

Thanks for the PR! Please post before/after screenshots of the change. Please also change the commit sequence so the tests are added in the same commit that adds the behavior being tested.

[vinodsingh-dev-gsoc]

Hi chrisbobbe! Thanks a lot for the detailed feedback. I'm currently working on your suggestions. I've gathered the before/after screenshots and am now in the process of squashing the commits and fixing the test suite to make the PR perfect. I'll push the updated changes shortly! 😊

[vinodsingh-dev-gsoc]

status	CombinedScreen	DM List	Profile Screen
Before
After fix

---

As you can see in the "After" screenshot, the fix ensures that a placeholder is now displayed whenever an avatar URL is null or fails to load, instead of showing a blank space. This provides a clearer and more consistent UI for the user.

[chrisbobbe]

Thanks! Small comments below.

[chrisbobbe]

Also please update the commit message to mention the issue being fixed, according to our style.

[chrisbobbe]

I see you've pushed some changes, but I'm not sure if you intend them to be ready for review; I assume you'll comment here when ready. 🙂

[vinodsingh-dev-gsoc]

Hi @chrisbobbe,

Thanks for the ping, and my apologies for the delay in updating you here.

I've addressed your suggestions and pushed the commits a few days ago. The PR should now be ready for another look.

Eager to hear your feedback. Thank you for your guidance!

[alya]

Please see our guide on how to demonstrate visual changes: https://zulip.readthedocs.io/en/latest/contributing/reviewable-prs.html#demonstrating-visual-changes. The before/after screenshots should be minimally different.

I would also like to see both placeholders and regular avatars in the same screenshot, and dark theme as well as light.

[vinodsingh-dev-gsoc]

Please see our guide on how to demonstrate visual changes: https://zulip.readthedocs.io/en/latest/contributing/reviewable-prs.html#demonstrating-visual-changes. The before/after screenshots should be minimally different.

I would also like to see both placeholders and regular avatars in the same screenshot, and dark theme as well as light.

Hi @alya, thanks for the detailed feedback! That makes perfect sense. I will generate the new screenshots with both themes and mixed avatars as you suggested and will post them here shortly.

[vinodsingh-dev-gsoc]

Before (Bot avatar URL fails)	After Fix (Shows Placeholder)