Don't raise load events for the default (fallback) source

Expensify · Jan 4, 2023 · 26c1ae9 · 26c1ae9
1 parent d90e85c
commit 26c1ae9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-96);"
+    style="filter: url(#tint-98);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-96"
+        id="tint-98"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-94);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-96);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-94"
+        id="tint-96"
       >
         <feflood
           flood-color="red"

diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -294,6 +294,33 @@ describe('components/Image', () => {
       expect(onLoadStub.mock.calls.length).toBe(1);
       expect(onLoadEndStub.mock.calls.length).toBe(1);
     });
+
+    test('is not called for default source', () => {
+      jest.useFakeTimers();
+      const onLoadStartStub = jest.fn();
+      const onLoadStub = jest.fn();
+      const onLoadEndStub = jest.fn();
+      render(
+        <Image
+          defaultSource="https://test.com/img-2.jpg"
+          onLoad={onLoadStub}
+          onLoadEnd={onLoadEndStub}
+          onLoadStart={onLoadStartStub}
+          source="https://test.com/img.jpg"
+        />
+      );
+      jest.runOnlyPendingTimers();
+      expect(onLoadStub).toHaveBeenCalledTimes(1);
+      expect(onLoadStub).toHaveBeenCalledWith(
+        expect.objectContaining({
+          nativeEvent: {
+            source: {
+              uri: 'https://test.com/img.jpg'
+            }
+          }
+        })
+      );
+    });
   });
 
   describe('prop "resizeMode"', () => {

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
@@ -212,10 +212,12 @@ const Image: React.AbstractComponent<
     }
   }
 
-  const imageLoadingProps = { onLoad, onLoadStart, onLoadEnd, onError };
-
-  const fallbackSource = useSource(imageLoadingProps, defaultSource);
-  const mainSource = useSource(imageLoadingProps, source);
+  // Don't raise load events from the fallback source
+  const fallbackSource = useSource({ onError }, defaultSource);
+  const mainSource = useSource(
+    { onLoad, onLoadStart, onLoadEnd, onError },
+    source
+  );
   const availableSource = getSourceToDisplay(mainSource, fallbackSource);
   const displayImageUri = ImageLoader.resolveUri(availableSource.uri);
   const imageSizeStyle = resolveAssetDimensions(availableSource);