[fix] Image: image LOADED state is only captured initially

If the Image component is rendered with a `null` source, and consecutively
updated with actual source url that was already loaded, it would fail to
pic kup the change - `state` would be `IDLE` for a brief moment and
this would cause a small flicker when the image renders

Let's always start from IDLE state, and update `shouldDisplaySource`
condition to be based on `ImageLoader.has` cache or not

Author: kidroca

packages/react-native-web/src/exports/Image/index.js

@@ -191,24 +191,18 @@ const Image: React.AbstractComponent<
     }
   }
 
-  const [state, updateState] = React.useState(() => {
-    const uri = resolveAssetUri(source);
-    if (uri != null) {
-      const isLoaded = ImageLoader.has(uri);
-      if (isLoaded) {
-        return LOADED;
-      }
-    }
-    return IDLE;
-  });
-
+  const [state, updateState] = React.useState(IDLE);
   const [layout, updateLayout] = React.useState({});
   const hasTextAncestor = React.useContext(TextAncestorContext);
   const hiddenImageRef = React.useRef(null);
   const filterRef = React.useRef(_filterId++);
   const requestRef = React.useRef(null);
+  const uri = resolveAssetUri(source);
+  const isCached = uri != null && ImageLoader.has(uri);
   const shouldDisplaySource =
-    state === LOADED || (state === LOADING && defaultSource == null);
+    state === LOADED ||
+    isCached ||
+    (state === LOADING && defaultSource == null);
   const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
     style,
     blurRadius,
@@ -261,7 +255,6 @@ const Image: React.AbstractComponent<
   }
 
   // Image loading
-  const uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();