Keep showing loading before image really loaded

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':

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';
 }