Fix Infinite Attachment Loading in Report Action Message

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -36,11 +36,6 @@ class BaseInvertedFlatList extends Component {
         this.sizeMap = {};
     }
 
-    shouldComponentUpdate(prevProps) {
-        // The FlatList itself should only re-render if items are added
-        return prevProps.data.length !== this.props.data.length;
-    }
-
     /**
      * Return default or previously cached height for
      * a renderItem row
@@ -135,8 +130,10 @@ class BaseInvertedFlatList extends Component {
                 inverted
                 renderItem={this.renderItem}
                 getItemLayout={this.getItemLayout}
-                removeClippedSubviews
                 bounces={false}
+                removeClippedSubviews
+                maxToRenderPerBatch={15}
+                updateCellsBatchingPeriod={40}
             />
         );
     }

src/page/home/report/ReportActionItem.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionPropTypes from './ReportActionPropTypes';
@@ -12,22 +12,13 @@ const propTypes = {
     displayAsGroup: PropTypes.bool.isRequired,
 };
 
-class ReportActionItem extends Component {
-    shouldComponentUpdate(nextProps) {
-        // If the grouping changes then we want to update the UI
-        return nextProps.displayAsGroup !== this.props.displayAsGroup;
-    }
-
-    render() {
-        return (
-            <>
-                {!this.props.displayAsGroup
-                    ? <ReportActionItemSingle action={this.props.action} />
-                    : <ReportActionItemGrouped action={this.props.action} />}
-            </>
-        );
-    }
-}
+const ReportActionItem = props => (
+    <>
+        {!props.displayAsGroup
+            ? <ReportActionItemSingle action={props.action} />
+            : <ReportActionItemGrouped action={props.action} />}
+    </>
+);
 
 ReportActionItem.propTypes = propTypes;
 

src/page/home/report/ReportActionItemGrouped.js

@@ -10,19 +10,13 @@ const propTypes = {
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
 };
 
-class ReportActionItemGrouped extends React.PureComponent {
-    render() {
-        const {action} = this.props;
-        return (
-            <View style={[styles.chatItem]}>
-                <View style={[styles.chatItemRightGrouped]}>
-                    <ReportActionItemMessage action={action} />
-                </View>
-            </View>
-        );
-    }
-}
+const ReportActionItemGrouped = ({action}) => (
+    <View style={[styles.chatItem]}>
+        <View style={[styles.chatItemRightGrouped]}>
+            <ReportActionItemMessage action={action} />
+        </View>
+    </View>
+);
 
 ReportActionItemGrouped.propTypes = propTypes;
-
 export default ReportActionItemGrouped;

src/page/home/report/ReportActionItemSingle.js

@@ -14,35 +14,31 @@ const propTypes = {
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
 };
 
-class ReportActionItemSingle extends React.PureComponent {
-    render() {
-        const {action} = this.props;
-        const avatarUrl = action.automatic
-            ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
-            : action.avatar;
-        return (
-            <View style={[styles.chatItem]}>
-                <Image
-                    source={{uri: avatarUrl}}
-                    style={[styles.actionAvatar]}
-                />
-                <View style={[styles.chatItemRight]}>
-                    <View style={[styles.chatItemMessageHeader]}>
-                        {_.map(action.person, (fragment, index) => (
-                            <ReportActionItemFragment
-                                key={`person-${action.sequenceNumber}-${index}`}
-                                fragment={fragment}
-                            />
-                        ))}
-                        <ReportActionItemDate timestamp={action.timestamp} />
-                    </View>
-                    <ReportActionItemMessage action={action} />
+const ReportActionItemSingle = ({action}) => {
+    const avatarUrl = action.automatic
+        ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
+        : action.avatar;
+    return (
+        <View style={[styles.chatItem]}>
+            <Image
+                source={{uri: avatarUrl}}
+                style={[styles.actionAvatar]}
+            />
+            <View style={[styles.chatItemRight]}>
+                <View style={[styles.chatItemMessageHeader]}>
+                    {_.map(action.person, (fragment, index) => (
+                        <ReportActionItemFragment
+                            key={`person-${action.sequenceNumber}-${index}`}
+                            fragment={fragment}
+                        />
+                    ))}
+                    <ReportActionItemDate timestamp={action.timestamp} />
                 </View>
+                <ReportActionItemMessage action={action} />
             </View>
-        );
-    }
-}
+        </View>
+    );
+};
 
 ReportActionItemSingle.propTypes = propTypes;
-
 export default ReportActionItemSingle;