From 636c691005cfce15a898897d82b2047ed7a99daa Mon Sep 17 00:00:00 2001
From: liangjianwen <liangjianwen@kuaishou.com>
Date: Mon, 12 Apr 2021 14:14:05 +0800
Subject: [PATCH] fix: simple fix problem that not showing loading after status
 change to success but image not yet loaded

---
 src/image-viewer.component.tsx | 17 +++++++++++++++++
 src/image-viewer.type.ts       |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/image-viewer.component.tsx b/src/image-viewer.component.tsx
index 848eb7b1..25405e57 100644
--- a/src/image-viewer.component.tsx
+++ b/src/image-viewer.component.tsx
@@ -507,6 +507,7 @@ export default class ImageViewer extends React.Component<Props, State> {
             </Wrapper>
           );
         case 'success':
+        case 'loadSuccess':
           if (!image.props) {
             image.props = {};
           }
@@ -520,6 +521,11 @@ export default class ImageViewer extends React.Component<Props, State> {
             width,
             height
           };
+          image.props.onLoad = () => {
+            const imageSizes = [...this.state.imageSizes!];
+            imageSizes[index].status = 'loadSuccess';
+            this.setState({ imageSizes });
+          };
 
           if (typeof image.props.source === 'number') {
             // source = require(..), doing nothing
@@ -561,6 +567,17 @@ export default class ImageViewer extends React.Component<Props, State> {
               maxScale={this.props.maxScale}
             >
               {this!.props!.renderImage!(image.props)}
+              {imageInfo.status === 'success' ? (
+                <View
+                  style={[
+                    this.styles.loadingContainer,
+                    this.styles.modalContainer,
+                    { position: 'absolute', width: '100%', height: '100%' }
+                  ]}
+                >
+                  {this!.props!.loadingRender!()}
+                </View>
+              ) : null}
             </ImageZoom>
           );
         case 'fail':
diff --git a/src/image-viewer.type.ts b/src/image-viewer.type.ts
index 310f4e0e..b3d9ab0a 100644
--- a/src/image-viewer.type.ts
+++ b/src/image-viewer.type.ts
@@ -98,7 +98,7 @@ export class Props {
    */
   public pageAnimateTime?: number = 100;
 
-  /** 
+  /**
    * 是否启用原生动画驱动
    * Whether to use the native code to perform animations.
    */
@@ -304,5 +304,5 @@ export interface IImageSize {
   width: number;
   height: number;
   // 图片加载状态
-  status: 'loading' | 'success' | 'fail';
+  status: 'loading' | 'success' | 'loadSuccess' | 'fail';
 }