fix: ensure placeholder is hidden (#82)

related: #41 #45 #64
react-component · Mar 18, 2021 · 75a1764 · 75a1764 · vercel · Mar 18, 2021
1 parent 10cb4ca
commit 75a1764
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/src/Image.tsx b/src/Image.tsx
@@ -110,6 +110,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
   });
   const canPreview = preview && !isError;
 
+  const isLoaded = React.useRef(false);
+
   const onLoad = () => {
     setStatus('normal');
   };
@@ -157,8 +159,10 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
   };
 
   const getImgRef = (img?: HTMLImageElement) => {
+    isLoaded.current = false;
     if (status !== 'loading') return;
     if (img?.complete && (img.naturalWidth || img.naturalHeight)) {
+      isLoaded.current = true;
       onLoad();
     }
   };
@@ -185,7 +189,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
     if (isError) {
       setStatus('normal');
     }
-    if (isCustomPlaceholder) {
+    if (isCustomPlaceholder && !isLoaded.current) {
       setStatus('loading');
     }
   }, [imgSrc]);

diff --git a/tests/placeholder.test.tsx b/tests/placeholder.test.tsx
@@ -60,14 +60,6 @@ describe('Placeholder', () => {
       />,
     );
 
-    expect(wrapper.find('.rc-image-placeholder').get(0)).toBeTruthy();
-
-    act(() => {
-      wrapper.setProps({});
-      jest.runAllTimers();
-      wrapper.update();
-    });
-
     expect(wrapper.find('.rc-image-placeholder').get(0)).toBeFalsy();
 
     domSpy.mockRestore();