From add4cf73612f6fd11589a9bc7373e0b43add84b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 28 Jul 2025 14:26:29 +0200
Subject: [PATCH 1/6] Fixed the double button on epmpty report preview

---
 .../EmptyMoneyRequestReportPreview.tsx                    | 8 +++-----
 .../MoneyRequestReportPreviewContent.tsx                  | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
index 54b2522e98ff..bb79e25cb201 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
-import type {ReactNode} from 'react';
+// import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
+// import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-function EmptyMoneyRequestReportPreview({emptyReportPreviewAction}: {emptyReportPreviewAction: ReactNode | undefined}) {
+function EmptyMoneyRequestReportPreview() {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <View style={[styles.alignItemsCenter, styles.highlightBG, styles.ml0, styles.mr0, styles.gap4, styles.reportContainerBorderRadius]}>
@@ -28,7 +27,6 @@ function EmptyMoneyRequestReportPreview({emptyReportPreviewAction}: {emptyReport
                     <Text style={[styles.textAlignCenter, styles.textSupporting, styles.fontSizeLabel]}>{translate('search.moneyRequestReport.emptyStateTitle')}</Text>
                 </View>
             </View>
-            <View style={[{width: shouldUseNarrowLayout ? '100%' : 303, height: 40}]}>{!!emptyReportPreviewAction && emptyReportPreviewAction}</View>
         </View>
     );
 }
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 3fd942bbba81..e52fc33192e2 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -727,7 +727,7 @@ function MoneyRequestReportPreviewContent({
                                                 ListFooterComponent={<View style={styles.pl2} />}
                                                 ListHeaderComponent={<View style={styles.pr2} />}
                                             />
-                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview emptyReportPreviewAction={reportPreviewActions[reportPreviewAction]} />}
+                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview/>}
                                         </View>
                                     )}
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>

From 41f8424f207afc5be197c466d4de393a57fb1cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 28 Jul 2025 14:27:02 +0200
Subject: [PATCH 2/6] Small cleanup after fix

---
 .../EmptyMoneyRequestReportPreview.tsx                          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
index bb79e25cb201..c32ff48095e9 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-// import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-// import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 

From ebf00b61eeded8cb73777939e725de487bc732f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 28 Jul 2025 14:47:34 +0200
Subject: [PATCH 3/6] Commit after prettier run

---
 .../MoneyRequestReportPreviewContent.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index e52fc33192e2..695566a2b197 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -727,7 +727,7 @@ function MoneyRequestReportPreviewContent({
                                                 ListFooterComponent={<View style={styles.pl2} />}
                                                 ListHeaderComponent={<View style={styles.pr2} />}
                                             />
-                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview/>}
+                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview />}
                                         </View>
                                     )}
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>

From ba8483a9442e94de0c2b30ec7a7274b0e3afd737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 28 Jul 2025 17:23:17 +0200
Subject: [PATCH 4/6] Fixed the loading status on empty report preview

---
 .../EmptyMoneyRequestReportPreview.tsx            |  4 +++-
 .../MoneyRequestReportPreviewContent.tsx          | 15 +++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
index c32ff48095e9..52dd5a2977f4 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx
@@ -4,6 +4,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -11,11 +12,12 @@ function EmptyMoneyRequestReportPreview() {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <View style={[styles.alignItemsCenter, styles.highlightBG, styles.ml0, styles.mr0, styles.gap4, styles.reportContainerBorderRadius]}>
             <View style={[styles.emptyStateMoneyRequestPreviewReport, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <View style={[styles.m1, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap4]}>
+                <View style={[{width: shouldUseNarrowLayout ? '100%' : 303}, styles.m1, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap4]}>
                     <ImageSVG
                         fill={theme.border}
                         height={64}
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 695566a2b197..9945f0edb2ec 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -110,7 +110,9 @@ function MoneyRequestReportPreviewContent({
     // so we defer the loading state update to ensure transactions are loaded
     const shouldShowLoadingDeferred = useDeferredValue(shouldShowLoading);
     const lastTransaction = transactions?.at(0);
-    const shouldShowEmptyPlaceholder = transactions.length === 0;
+    const shouldShowSkeleton = shouldShowLoading && transactions.length === 0;
+    const shouldShowEmptyPlaceholder = transactions.length === 0 && !shouldShowLoading;
+    const showStatusAndSkeleton = !shouldShowEmptyPlaceholder;
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -576,10 +578,7 @@ function MoneyRequestReportPreviewContent({
     }, [carouselTransactions.length]);
 
     return (
-        <View
-            onLayout={onWrapperLayout}
-            testID="MoneyRequestReportPreviewContent-wrapper"
-        >
+        <View onLayout={onWrapperLayout}>
             <OfflineWithFeedback
                 pendingAction={iouReport?.pendingFields?.preview}
                 shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}
@@ -636,10 +635,10 @@ function MoneyRequestReportPreviewContent({
                                                         </Text>
                                                     </Animated.View>
                                                 </View>
-                                                {shouldShowEmptyPlaceholder ? (
+                                                {showStatusAndSkeleton && shouldShowSkeleton ? (
                                                     <MoneyReportHeaderStatusBarSkeleton />
                                                 ) : (
-                                                    <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
+                                                    !shouldShowEmptyPlaceholder && <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
                                                         {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.mr1]}>{approvedOrSettledIcon}</View>}
                                                         <Text style={[styles.textLabelSupporting, styles.lh16]}>{`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}</Text>
                                                     </View>
@@ -727,7 +726,7 @@ function MoneyRequestReportPreviewContent({
                                                 ListFooterComponent={<View style={styles.pl2} />}
                                                 ListHeaderComponent={<View style={styles.pr2} />}
                                             />
-                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview />}
+                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview/>}
                                         </View>
                                     )}
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>

From ded585dfac863dcdb72aadf57f768d50c2fb234d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 28 Jul 2025 18:06:20 +0200
Subject: [PATCH 5/6] Restored missing testID

---
 .../MoneyRequestReportPreviewContent.tsx                     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 9945f0edb2ec..7f54c8a5684e 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -578,7 +578,10 @@ function MoneyRequestReportPreviewContent({
     }, [carouselTransactions.length]);
 
     return (
-        <View onLayout={onWrapperLayout}>
+        <View
+            onLayout={onWrapperLayout}
+            testID="MoneyRequestReportPreviewContent-wrapper"
+        >
             <OfflineWithFeedback
                 pendingAction={iouReport?.pendingFields?.preview}
                 shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}

From 7797707958dcf8f0d0b5dc5541b14f3a2bf3ba12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Kali=C5=84ski?= <kubakalinski2@gmail.com>
Date: Mon, 28 Jul 2025 18:34:04 +0200
Subject: [PATCH 6/6] Prettier run

---
 .../MoneyRequestReportPreviewContent.tsx             | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 7f54c8a5684e..96ba5d141dde 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -641,10 +641,12 @@ function MoneyRequestReportPreviewContent({
                                                 {showStatusAndSkeleton && shouldShowSkeleton ? (
                                                     <MoneyReportHeaderStatusBarSkeleton />
                                                 ) : (
-                                                    !shouldShowEmptyPlaceholder && <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
-                                                        {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.mr1]}>{approvedOrSettledIcon}</View>}
-                                                        <Text style={[styles.textLabelSupporting, styles.lh16]}>{`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}</Text>
-                                                    </View>
+                                                    !shouldShowEmptyPlaceholder && (
+                                                        <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
+                                                            {isIconNeeded && <View style={[styles.alignItemsCenter, styles.lh16, styles.mr1]}>{approvedOrSettledIcon}</View>}
+                                                            <Text style={[styles.textLabelSupporting, styles.lh16]}>{`${reportStatus} ${CONST.DOT_SEPARATOR} ${expenseCount}`}</Text>
+                                                        </View>
+                                                    )
                                                 )}
                                             </View>
                                             {!shouldUseNarrowLayout && transactions.length > 2 && reportPreviewStyles.expenseCountVisible && (
@@ -729,7 +731,7 @@ function MoneyRequestReportPreviewContent({
                                                 ListFooterComponent={<View style={styles.pl2} />}
                                                 ListHeaderComponent={<View style={styles.pr2} />}
                                             />
-                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview/>}
+                                            {shouldShowEmptyPlaceholder && <EmptyMoneyRequestReportPreview />}
                                         </View>
                                     )}
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>