Merge pull request #27420 from tienifr/fix/26657

fix: 26657 Another error message for a short time when opening archived chat from search bar

src/components/ArchivedReportFooter.js

@@ -14,6 +14,7 @@ import reportPropTypes from '../pages/reportPropTypes';
 import * as ReportActionsUtils from '../libs/ReportActionsUtils';
 import styles from '../styles/styles';
 import * as PersonalDetailsUtils from '../libs/PersonalDetailsUtils';
+import ArchivedReportFooterSkeletonView from './ArchivedReportFooterSkeletonView';
 
 const propTypes = {
     /** The reason this report was archived */
@@ -50,6 +51,9 @@ const defaultProps = {
 };
 
 function ArchivedReportFooter(props) {
+    if (!props.reportClosedAction.reportActionID) {
+        return <ArchivedReportFooterSkeletonView />;
+    }
     const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
     let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [props.report.ownerAccountID, 'displayName']);
 

src/components/ArchivedReportFooterSkeletonView.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import {View} from 'react-native';
+import {Rect} from 'react-native-svg';
+import compose from '../libs/compose';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+import withLocalize from './withLocalize';
+import withWindowDimensions from './withWindowDimensions';
+
+const propTypes = {
+    /** Whether to animate the skeleton view */
+    shouldAnimate: PropTypes.bool,
+};
+
+const defaultTypes = {
+    shouldAnimate: true,
+};
+
+function ArchivedReportFooterSkeletonView(props) {
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.archivedReportFooter, styles.hoveredComponentBG]}>
+            <SkeletonViewContentLoader
+                animate={props.shouldAnimate}
+                width={styles.w100.width}
+                height={48}
+                backgroundColor={themeColors.skeletonLHNIn}
+                foregroundColor={themeColors.skeletonLHNOut}
+            >
+                <Rect
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="48"
+                    rx="8"
+                    ry="8"
+                />
+            </SkeletonViewContentLoader>
+        </View>
+    );
+}
+
+ArchivedReportFooterSkeletonView.propTypes = propTypes;
+ArchivedReportFooterSkeletonView.defaultProps = defaultTypes;
+
+ArchivedReportFooterSkeletonView.displayName = 'ArchivedReportFooterSkeletonView';
+export default compose(withWindowDimensions, withLocalize)(ArchivedReportFooterSkeletonView);