Adding already rendered image has a small flicker

[kidroca]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

When we're (repeatedly) adding the same image on screen there's a small flicker happening the first time the component renders

For example the avatars of a chat app

• each time a message is added/received the avatar of the new message flickers
• even though the avatar is the same as the one rendered on previous messages above

Expected behavior

Adding the same image twice, should render instantly the 2nd time it's used

Steps to reproduce

Browser: Chrome
ENV: codesandbox
react-native-web: 0.18.12

Steps:

1. Go to the test case address
2. Press the "Add More" button at the top a few time
3. Notice each time the images flicker
4. (Optional) uncomment the defaultSource (L34) and repeat the steps - no flicker occurs

Screen.Recording.2023-03-03.at.12.22.40.mov

Test case

https://codesandbox.io/s/rnw-image-flicker-bug-sample-obbhov

Additional comments

There's no such problem if we use both defaultSource and source with the same source

<Image soruce={{ uri: '/my-image.jpg' }} defaultSource={{ uri: '/my-image.jpg' }} />

This is because of internal logic immediately rendering the defaultSource, while source is not rendered and always starts from IDLE state.
I've traced this back to refactoring the Image from class based to functional component, where we no longer add images to ImageUriCache (probably it was overlooked in the refactor?)

---

The flicker can be easily observer if we put a breakpoint in Image render's code

1. First render - no dom element added, loading state IDLE ❌
2. 2nd render - loading state IDLE, dom element added, but empty ❌
3. 3rd render - loading state LOADED, dom element updated with image content ✅

Since the image was already rendered and is available on screen it should be immediately rendered at step 1