fix: 16528 upload gif image fluctuate

src/components/AttachmentModal.js

@@ -86,6 +86,9 @@ class AttachmentModal extends PureComponent {
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
             isConfirmButtonDisabled: false,
             confirmButtonFadeAnimation: new Animated.Value(1),
+            file: props.originalFileName && {
+                name: props.originalFileName,
+            },
         };
 
         this.submitAndClose = this.submitAndClose.bind(this);

src/components/ImageView/index.js

@@ -35,7 +35,7 @@ class ImageView extends PureComponent {
         this.trackPointerPosition = this.trackPointerPosition.bind(this);
 
         this.state = {
-            isLoading: false,
+            isLoading: true,
             containerHeight: 0,
             containerWidth: 0,
             isZoomed: false,
@@ -275,7 +275,7 @@ class ImageView extends PureComponent {
                 <Pressable
                     style={{
                         ...StyleUtils.getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale,
-                            this.state.containerHeight, this.state.containerWidth),
+                            this.state.containerHeight, this.state.containerWidth, this.state.isLoading),
                         ...StyleUtils.getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
                         ...this.state.isZoomed && this.state.zoomScale >= 1 ? styles.pRelative : styles.pAbsolute,
                         ...styles.flex1,
@@ -285,10 +285,10 @@ class ImageView extends PureComponent {
                 >
                     <Image
                         source={{uri: this.props.url}}
-                        style={this.state.isLoading ? undefined : [
+                        style={[
                             styles.h100,
                             styles.w100,
-                        ]} // Hide image until finished loading to prevent showing preview with wrong dimensions.
+                        ]}
                         resizeMode={Image.resizeMode.contain}
                         onLoadStart={this.imageLoadingStart}
                         onLoad={this.imageLoad}

src/libs/actions/PersonalDetails.js

@@ -289,11 +289,13 @@ function updateAvatar(file) {
             [currentUserEmail]: {
                 avatar: file.uri,
                 avatarThumbnail: file.uri,
+                originalFileName: file.name,
                 errorFields: {
                     avatar: null,
                 },
                 pendingFields: {
                     avatar: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    originalFileName: null,
                 },
             },
         },

src/pages/DetailsPage.js

@@ -130,6 +130,7 @@ class DetailsPage extends React.PureComponent {
                                         headerTitle={isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
                                         source={ReportUtils.getFullSizeAvatar(details.avatar, details.login)}
                                         isAuthTokenRequired
+                                        originalFileName={details.originalFileName}
                                     >
                                         {({show}) => (
                                             <PressableWithoutFocus

src/styles/StyleUtils.js

@@ -196,14 +196,13 @@ function getZoomCursorStyle(isZoomed, isDragging) {
  * @param {Number} zoomScale
  * @param {Number} containerHeight
  * @param {Number} containerWidth
- * @return {Object}
+ * @param {Boolean} isLoading
+ * @returns {Object | null}
  */
-function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight, containerWidth) {
-    if (imgWidth === 0 || imgHeight === 0) {
-        return {
-            height: isZoomed ? '250%' : '100%',
-            width: isZoomed ? '250%' : '100%',
-        };
+function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight, containerWidth, isLoading) {
+    // Hide image until finished loading to prevent showing preview with wrong dimensions
+    if (isLoading || imgWidth === 0 || imgHeight === 0) {
+        return undefined;
     }
     const top = `${Math.max((containerHeight - imgHeight) / 2, 0)}px`;
     const left = `${Math.max((containerWidth - imgWidth) / 2, 0)}px`;