From 35dcd9b9354da4bf03a5f5232fecbecff3176b5d Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Thu, 14 Sep 2023 15:43:44 +0700
Subject: [PATCH 1/5] fix: 26657 Another error message for a short time when
 opening archived chat from search bar

---
 src/components/ArchivedReportFooter.js        |  4 ++
 .../ArchivedReportFooterSkeletonView.js       | 46 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 src/components/ArchivedReportFooterSkeletonView.js

diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js
index 71d331b68db0..df49afbc3f0b 100644
--- a/src/components/ArchivedReportFooter.js
+++ b/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']);
 
diff --git a/src/components/ArchivedReportFooterSkeletonView.js b/src/components/ArchivedReportFooterSkeletonView.js
new file mode 100644
index 000000000000..e98f4864aa0d
--- /dev/null
+++ b/src/components/ArchivedReportFooterSkeletonView.js
@@ -0,0 +1,46 @@
+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.p5, styles.archivedReportFooter, styles.hoveredComponentBG]}>
+            <SkeletonViewContentLoader
+                animate={props.shouldAnimate}
+                width={styles.w100.width}
+                height={8}
+                backgroundColor={themeColors.borderLighter}
+                foregroundColor={themeColors.border}
+            >
+                <Rect
+                    x="0"
+                    y="0"
+                    width="100%"
+                    height="8"
+                />
+            </SkeletonViewContentLoader>
+        </View>
+    );
+}
+
+ArchivedReportFooterSkeletonView.propTypes = propTypes;
+ArchivedReportFooterSkeletonView.defaultProps = defaultTypes;
+
+ArchivedReportFooterSkeletonView.displayName = 'ArchivedReportFooterSkeletonView';
+export default compose(withWindowDimensions, withLocalize)(ArchivedReportFooterSkeletonView);

From e329abe8fd015c7681a3541de5b7a128156bd6f6 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 29 Sep 2023 10:22:44 +0700
Subject: [PATCH 2/5] fix skeleton view

---
 src/components/ArchivedReportFooterSkeletonView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ArchivedReportFooterSkeletonView.js b/src/components/ArchivedReportFooterSkeletonView.js
index e98f4864aa0d..b7e032fa2ca4 100644
--- a/src/components/ArchivedReportFooterSkeletonView.js
+++ b/src/components/ArchivedReportFooterSkeletonView.js
@@ -20,11 +20,11 @@ const defaultTypes = {
 
 function ArchivedReportFooterSkeletonView(props) {
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.p5, styles.archivedReportFooter, styles.hoveredComponentBG]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.archivedReportFooter, styles.hoveredComponentBG]}>
             <SkeletonViewContentLoader
                 animate={props.shouldAnimate}
                 width={styles.w100.width}
-                height={8}
+                height={48}
                 backgroundColor={themeColors.borderLighter}
                 foregroundColor={themeColors.border}
             >
@@ -32,7 +32,7 @@ function ArchivedReportFooterSkeletonView(props) {
                     x="0"
                     y="0"
                     width="100%"
-                    height="8"
+                    height="48"
                 />
             </SkeletonViewContentLoader>
         </View>

From b3cf54f8a9754cc509102a47d846ebc23991b4ae Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 29 Sep 2023 10:45:57 +0700
Subject: [PATCH 3/5] change border style

---
 src/components/ArchivedReportFooterSkeletonView.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ArchivedReportFooterSkeletonView.js b/src/components/ArchivedReportFooterSkeletonView.js
index b7e032fa2ca4..ff38a608924b 100644
--- a/src/components/ArchivedReportFooterSkeletonView.js
+++ b/src/components/ArchivedReportFooterSkeletonView.js
@@ -33,6 +33,8 @@ function ArchivedReportFooterSkeletonView(props) {
                     y="0"
                     width="100%"
                     height="48"
+                    rx="8"
+                    rx="8"
                 />
             </SkeletonViewContentLoader>
         </View>

From 16ca24423e31e152da8e4462669a0a206a8814ea Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Mon, 2 Oct 2023 11:06:28 +0700
Subject: [PATCH 4/5] change color

---
 src/components/ArchivedReportFooterSkeletonView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ArchivedReportFooterSkeletonView.js b/src/components/ArchivedReportFooterSkeletonView.js
index ff38a608924b..5e8cedc0ae1e 100644
--- a/src/components/ArchivedReportFooterSkeletonView.js
+++ b/src/components/ArchivedReportFooterSkeletonView.js
@@ -25,8 +25,8 @@ function ArchivedReportFooterSkeletonView(props) {
                 animate={props.shouldAnimate}
                 width={styles.w100.width}
                 height={48}
-                backgroundColor={themeColors.borderLighter}
-                foregroundColor={themeColors.border}
+                backgroundColor={themeColors.skeletonLHNIn}
+                foregroundColor={themeColors.skeletonLHNOut}
             >
                 <Rect
                     x="0"

From 5c54721c21b7deabd7d492005bb734dcdd54d5fc Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 4 Oct 2023 10:16:57 +0700
Subject: [PATCH 5/5] merge main

---
 src/components/ArchivedReportFooterSkeletonView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ArchivedReportFooterSkeletonView.js b/src/components/ArchivedReportFooterSkeletonView.js
index 5e8cedc0ae1e..5fbc3c9d9e2c 100644
--- a/src/components/ArchivedReportFooterSkeletonView.js
+++ b/src/components/ArchivedReportFooterSkeletonView.js
@@ -34,7 +34,7 @@ function ArchivedReportFooterSkeletonView(props) {
                     width="100%"
                     height="48"
                     rx="8"
-                    rx="8"
+                    ry="8"
                 />
             </SkeletonViewContentLoader>
         </View>