From c251101975cb7119b685a56422c6aaf9708078c8 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 3 Sep 2023 21:49:11 +0530
Subject: [PATCH 01/11] feat: basic skeletal view added

---
 src/components/IOUSkeletonView.js             | 60 +++++++++++++++++++
 .../ReportActionItem/MoneyRequestPreview.js   |  6 ++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/IOUSkeletonView.js

diff --git a/src/components/IOUSkeletonView.js b/src/components/IOUSkeletonView.js
new file mode 100644
index 000000000000..6bbac14347d8
--- /dev/null
+++ b/src/components/IOUSkeletonView.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import {View} from 'react-native';
+import {Rect} from 'react-native-svg';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import variables from '../styles/variables';
+import themeColors from '../styles/themes/default';
+import compose from '../libs/compose';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    ...windowDimensionsPropTypes,
+    ...withLocalizePropTypes,
+    shouldAnimate: PropTypes.bool,
+};
+
+const defaultProps = {
+    shouldAnimate: true,
+};
+
+function IOUSkeletonView(props) {
+    return (
+      <View
+      style={[styles.flex1, styles.overflowHidden]}>
+            <SkeletonViewContentLoader
+                animate={props.shouldAnimate}
+                width={107}
+                height={variables.contentHeaderHeight}
+                backgroundColor={themeColors.borderLighter}
+                foregroundColor={themeColors.border}
+            >
+                    <Rect
+                        x="16"
+                        y="20"
+                        width="40"
+                        height="8"
+                    />
+                    <Rect
+                        x="16"
+                        y="46"
+                        width="120"
+                        height="20"
+                    />
+                    <Rect
+                        x="16"
+                        y="78"
+                        width="120"
+                        height="20"
+                    />
+                </SkeletonViewContentLoader>
+        </View>
+    );
+}
+
+IOUSkeletonView.propTypes = propTypes;
+IOUSkeletonView.defaultProps = defaultProps;
+IOUSkeletonView.displayName = 'IOUSkeletonView';
+export default compose(withWindowDimensions, withLocalize)(IOUSkeletonView);
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 5c834a53a00e..862583cf44fc 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import lodashIsEmpty from 'lodash/isEmpty';
 import _ from 'underscore';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
@@ -35,6 +36,7 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
 import transactionPropTypes from '../transactionPropTypes';
 import colors from '../../styles/colors';
+import IOUSkeletonView from '../IOUSkeletonView';
 
 const propTypes = {
     /** The active IOUReport, used for Onyx subscription */
@@ -227,6 +229,9 @@ function MoneyRequestPreview(props) {
                             isHovered={isScanning}
                         />
                     )}
+                    {
+                        lodashIsEmpty(props.transaction)
+                        ? <IOUSkeletonView />  :
                     <View style={styles.moneyRequestPreviewBoxText}>
                         <View style={[styles.flexRow]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
@@ -302,6 +307,7 @@ function MoneyRequestPreview(props) {
                             )}
                         </View>
                     </View>
+}  
                 </View>
             </OfflineWithFeedback>
         </View>

From b2912b24f0fe307a3ac6d99737bf3abdee364d16 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 3 Sep 2023 21:59:06 +0530
Subject: [PATCH 02/11] fix: update the lenght of the skeleton view

---
 src/components/IOUSkeletonView.js | 10 +++++-----
 src/styles/variables.ts           |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/IOUSkeletonView.js b/src/components/IOUSkeletonView.js
index 6bbac14347d8..e7e53053c862 100644
--- a/src/components/IOUSkeletonView.js
+++ b/src/components/IOUSkeletonView.js
@@ -26,8 +26,8 @@ function IOUSkeletonView(props) {
       style={[styles.flex1, styles.overflowHidden]}>
             <SkeletonViewContentLoader
                 animate={props.shouldAnimate}
-                width={107}
-                height={variables.contentHeaderHeight}
+                width={styles.w100.width}
+                height={variables.moneyRequestSkeletonHeight}
                 backgroundColor={themeColors.borderLighter}
                 foregroundColor={themeColors.border}
             >
@@ -38,7 +38,7 @@ function IOUSkeletonView(props) {
                         height="8"
                     />
                     <Rect
-                        x="16"
+                        x="15"
                         y="46"
                         width="120"
                         height="20"
@@ -46,8 +46,8 @@ function IOUSkeletonView(props) {
                     <Rect
                         x="16"
                         y="78"
-                        width="120"
-                        height="20"
+                        width="80"
+                        height="8"
                     />
                 </SkeletonViewContentLoader>
         </View>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index f584e657c693..3b6dbf47970e 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -152,4 +152,6 @@ export default {
     qrShareHorizontalPadding: 32,
 
     baseMenuItemHeight: 64,
+
+    moneyRequestSkeletonHeight: 107,
 } as const;

From 6c6e69dea9c87ea5c74627022d12921625712498 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 3 Sep 2023 22:01:46 +0530
Subject: [PATCH 03/11] style: lint fixes

---
 .../ReportActionItem/MoneyRequestPreview.js   | 141 +++++++++---------
 1 file changed, 71 insertions(+), 70 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 862583cf44fc..2e3cee33054a 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -230,83 +230,84 @@ function MoneyRequestPreview(props) {
                         />
                     )}
                     {
-                        lodashIsEmpty(props.transaction)
-                        ? <IOUSkeletonView />  :
-                    <View style={styles.moneyRequestPreviewBoxText}>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
-                                {Boolean(getSettledMessage()) && (
-                                    <>
+                        lodashIsEmpty(props.transaction) ? ( <IOUSkeletonView /> 
+                        ) : (
+                            <View style={styles.moneyRequestPreviewBoxText}>
+                                <View style={[styles.flexRow]}>
+                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
+                                        {Boolean(getSettledMessage()) && (
+                                            <>
+                                                <Icon
+                                                    src={Expensicons.DotIndicator}
+                                                    width={4}
+                                                    height={4}
+                                                    additionalStyles={[styles.mr1, styles.ml1]}
+                                                />
+                                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
+                                            </>
+                                        )}
+                                    </View>
+                                    {hasFieldErrors && (
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            width={4}
-                                            height={4}
-                                            additionalStyles={[styles.mr1, styles.ml1]}
+                                            fill={colors.red}
                                         />
-                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
-                                    </>
-                                )}
-                            </View>
-                            {hasFieldErrors && (
-                                <Icon
-                                    src={Expensicons.DotIndicator}
-                                    fill={colors.red}
-                                />
-                            )}
-                            <Icon
-                                fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                                src={Expensicons.ArrowRight}
-                            />
-                        </View>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
-                                {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
-                                    <View style={styles.defaultCheckmarkWrapper}>
-                                        <Icon
-                                            src={Expensicons.Checkmark}
-                                            fill={themeColors.iconSuccessFill}
-                                        />
-                                    </View>
-                                )}
-                            </View>
-                            {props.isBillSplit && (
-                                <View style={styles.moneyRequestPreviewBoxAvatar}>
-                                    <MultipleAvatars
-                                        icons={participantAvatars}
-                                        shouldStackHorizontally
-                                        size="small"
-                                        isHovered={props.isHovered}
-                                        shouldUseCardBackground
+                                    )}
+                                    <Icon
+                                        fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
+                                        src={Expensicons.ArrowRight}
                                     />
                                 </View>
-                            )}
-                        </View>
-                        {!props.isBillSplit && !_.isEmpty(requestMerchant) && (
-                            <View style={[styles.flexRow]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
-                            </View>
-                        )}
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1]}>
-                                {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                    <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                <View style={[styles.flexRow]}>
+                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
+                                        {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
+                                            <View style={styles.defaultCheckmarkWrapper}>
+                                                <Icon
+                                                    src={Expensicons.Checkmark}
+                                                    fill={themeColors.iconSuccessFill}
+                                                />
+                                            </View>
+                                        )}
+                                    </View>
+                                    {props.isBillSplit && (
+                                        <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                            <MultipleAvatars
+                                                icons={participantAvatars}
+                                                shouldStackHorizontally
+                                                size="small"
+                                                isHovered={props.isHovered}
+                                                shouldUseCardBackground
+                                            />
+                                        </View>
+                                    )}
+                                </View>
+                                {!props.isBillSplit && !_.isEmpty(requestMerchant) && (
+                                    <View style={[styles.flexRow]}>
+                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
+                                    </View>
                                 )}
-                                {!_.isEmpty(description) && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
+                                <View style={[styles.flexRow]}>
+                                    <View style={[styles.flex1]}>
+                                        {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
+                                            <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                        )}
+                                        {!_.isEmpty(description) && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
+                                    </View>
+                                    {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
+                                        <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
+                                            {props.translate('iou.amountEach', {
+                                                amount: CurrencyUtils.convertToDisplayString(
+                                                    IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
+                                                    requestCurrency,
+                                                ),
+                                            })}
+                                        </Text>
+                                    )}
+                                </View>
                             </View>
-                            {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
-                                <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
-                                    {props.translate('iou.amountEach', {
-                                        amount: CurrencyUtils.convertToDisplayString(
-                                            IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
-                                            requestCurrency,
-                                        ),
-                                    })}
-                                </Text>
-                            )}
-                        </View>
-                    </View>
+                        )
 }  
                 </View>
             </OfflineWithFeedback>

From c237268ff5c4ec13bb975a62e42dd72f07efdad8 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sun, 3 Sep 2023 23:54:23 +0530
Subject: [PATCH 04/11] refactor: rename the skeleton view file

---
 ...{IOUSkeletonView.js => MoneyRequestSkeletonView.js} | 10 +++++-----
 src/components/ReportActionItem/MoneyRequestPreview.js |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename src/components/{IOUSkeletonView.js => MoneyRequestSkeletonView.js} (85%)

diff --git a/src/components/IOUSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
similarity index 85%
rename from src/components/IOUSkeletonView.js
rename to src/components/MoneyRequestSkeletonView.js
index e7e53053c862..ceee8f984f82 100644
--- a/src/components/IOUSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -20,7 +20,7 @@ const defaultProps = {
     shouldAnimate: true,
 };
 
-function IOUSkeletonView(props) {
+function MoneyRequestSkeletonView(props) {
     return (
       <View
       style={[styles.flex1, styles.overflowHidden]}>
@@ -54,7 +54,7 @@ function IOUSkeletonView(props) {
     );
 }
 
-IOUSkeletonView.propTypes = propTypes;
-IOUSkeletonView.defaultProps = defaultProps;
-IOUSkeletonView.displayName = 'IOUSkeletonView';
-export default compose(withWindowDimensions, withLocalize)(IOUSkeletonView);
+MoneyRequestSkeletonView.propTypes = propTypes;
+MoneyRequestSkeletonView.defaultProps = defaultProps;
+MoneyRequestSkeletonView.displayName = 'IOUSkeletonView';
+export default compose(withWindowDimensions, withLocalize)(MoneyRequestSkeletonView);
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 2e3cee33054a..461d788c37ac 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -36,7 +36,7 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
 import transactionPropTypes from '../transactionPropTypes';
 import colors from '../../styles/colors';
-import IOUSkeletonView from '../IOUSkeletonView';
+import MoneyRequestSkeletonView from '../MoneyRequestSkeletonView';
 
 const propTypes = {
     /** The active IOUReport, used for Onyx subscription */
@@ -230,7 +230,7 @@ function MoneyRequestPreview(props) {
                         />
                     )}
                     {
-                        lodashIsEmpty(props.transaction) ? ( <IOUSkeletonView /> 
+                        lodashIsEmpty(props.transaction) ? ( <MoneyRequestSkeletonView /> 
                         ) : (
                             <View style={styles.moneyRequestPreviewBoxText}>
                                 <View style={[styles.flexRow]}>

From 230b2cc7c1499d06f8df0719cae4cb7d9e6f53ed Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 00:11:43 +0530
Subject: [PATCH 05/11] style: lint fixes

---
 src/components/MoneyRequestSkeletonView.js    |  41 +++---
 .../ReportActionItem/MoneyRequestPreview.js   | 133 +++++++++---------
 2 files changed, 86 insertions(+), 88 deletions(-)

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index ceee8f984f82..2a5013bf28e7 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -22,8 +22,7 @@ const defaultProps = {
 
 function MoneyRequestSkeletonView(props) {
     return (
-      <View
-      style={[styles.flex1, styles.overflowHidden]}>
+        <View style={[styles.flex1, styles.overflowHidden]}>
             <SkeletonViewContentLoader
                 animate={props.shouldAnimate}
                 width={styles.w100.width}
@@ -31,25 +30,25 @@ function MoneyRequestSkeletonView(props) {
                 backgroundColor={themeColors.borderLighter}
                 foregroundColor={themeColors.border}
             >
-                    <Rect
-                        x="16"
-                        y="20"
-                        width="40"
-                        height="8"
-                    />
-                    <Rect
-                        x="15"
-                        y="46"
-                        width="120"
-                        height="20"
-                    />
-                    <Rect
-                        x="16"
-                        y="78"
-                        width="80"
-                        height="8"
-                    />
-                </SkeletonViewContentLoader>
+                <Rect
+                    x="16"
+                    y="20"
+                    width="40"
+                    height="8"
+                />
+                <Rect
+                    x="15"
+                    y="46"
+                    width="120"
+                    height="20"
+                />
+                <Rect
+                    x="16"
+                    y="78"
+                    width="80"
+                    height="8"
+                />
+            </SkeletonViewContentLoader>
         </View>
     );
 }
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 461d788c37ac..efe415f8fb30 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -229,86 +229,85 @@ function MoneyRequestPreview(props) {
                             isHovered={isScanning}
                         />
                     )}
-                    {
-                        lodashIsEmpty(props.transaction) ? ( <MoneyRequestSkeletonView /> 
-                        ) : (
-                            <View style={styles.moneyRequestPreviewBoxText}>
-                                <View style={[styles.flexRow]}>
-                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
-                                        {Boolean(getSettledMessage()) && (
-                                            <>
-                                                <Icon
-                                                    src={Expensicons.DotIndicator}
-                                                    width={4}
-                                                    height={4}
-                                                    additionalStyles={[styles.mr1, styles.ml1]}
-                                                />
-                                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
-                                            </>
-                                        )}
-                                    </View>
-                                    {hasFieldErrors && (
-                                        <Icon
-                                            src={Expensicons.DotIndicator}
-                                            fill={colors.red}
-                                        />
+                    {lodashIsEmpty(props.transaction) ? (
+                        <MoneyRequestSkeletonView />
+                    ) : (
+                        <View style={styles.moneyRequestPreviewBoxText}>
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
+                                    {Boolean(getSettledMessage()) && (
+                                        <>
+                                            <Icon
+                                                src={Expensicons.DotIndicator}
+                                                width={4}
+                                                height={4}
+                                                additionalStyles={[styles.mr1, styles.ml1]}
+                                            />
+                                            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
+                                        </>
                                     )}
+                                </View>
+                                {hasFieldErrors && (
                                     <Icon
-                                        fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                                        src={Expensicons.ArrowRight}
+                                        src={Expensicons.DotIndicator}
+                                        fill={colors.red}
                                     />
-                                </View>
-                                <View style={[styles.flexRow]}>
-                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
-                                        {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
-                                            <View style={styles.defaultCheckmarkWrapper}>
-                                                <Icon
-                                                    src={Expensicons.Checkmark}
-                                                    fill={themeColors.iconSuccessFill}
-                                                />
-                                            </View>
-                                        )}
-                                    </View>
-                                    {props.isBillSplit && (
-                                        <View style={styles.moneyRequestPreviewBoxAvatar}>
-                                            <MultipleAvatars
-                                                icons={participantAvatars}
-                                                shouldStackHorizontally
-                                                size="small"
-                                                isHovered={props.isHovered}
-                                                shouldUseCardBackground
+                                )}
+                                <Icon
+                                    fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
+                                    src={Expensicons.ArrowRight}
+                                />
+                            </View>
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
+                                    {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
+                                        <View style={styles.defaultCheckmarkWrapper}>
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={themeColors.iconSuccessFill}
                                             />
                                         </View>
                                     )}
                                 </View>
-                                {!props.isBillSplit && !_.isEmpty(requestMerchant) && (
-                                    <View style={[styles.flexRow]}>
-                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
+                                {props.isBillSplit && (
+                                    <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                        <MultipleAvatars
+                                            icons={participantAvatars}
+                                            shouldStackHorizontally
+                                            size="small"
+                                            isHovered={props.isHovered}
+                                            shouldUseCardBackground
+                                        />
                                     </View>
                                 )}
+                            </View>
+                            {!props.isBillSplit && !_.isEmpty(requestMerchant) && (
                                 <View style={[styles.flexRow]}>
-                                    <View style={[styles.flex1]}>
-                                        {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                            <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
-                                        )}
-                                        {!_.isEmpty(description) && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
-                                    </View>
-                                    {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
-                                        <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
-                                            {props.translate('iou.amountEach', {
-                                                amount: CurrencyUtils.convertToDisplayString(
-                                                    IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
-                                                    requestCurrency,
-                                                ),
-                                            })}
-                                        </Text>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
+                                </View>
+                            )}
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1]}>
+                                    {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
+                                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
                                     )}
+                                    {!_.isEmpty(description) && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
                                 </View>
+                                {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
+                                    <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
+                                        {props.translate('iou.amountEach', {
+                                            amount: CurrencyUtils.convertToDisplayString(
+                                                IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
+                                                requestCurrency,
+                                            ),
+                                        })}
+                                    </Text>
+                                )}
                             </View>
-                        )
-}  
+                        </View>
+                    )}
                 </View>
             </OfflineWithFeedback>
         </View>

From ad392c37828d80da2a51c314bbf833f3121a9dbd Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 01:13:09 +0530
Subject: [PATCH 06/11] fix: pr comments

---
 src/components/MoneyRequestSkeletonView.js             | 10 ++--------
 src/components/ReportActionItem/MoneyRequestPreview.js |  3 +--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index 2a5013bf28e7..e1f3ac813aa1 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -4,15 +4,10 @@ import {Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import variables from '../styles/variables';
 import themeColors from '../styles/themes/default';
-import compose from '../libs/compose';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
     shouldAnimate: PropTypes.bool,
 };
 
@@ -25,7 +20,6 @@ function MoneyRequestSkeletonView(props) {
         <View style={[styles.flex1, styles.overflowHidden]}>
             <SkeletonViewContentLoader
                 animate={props.shouldAnimate}
-                width={styles.w100.width}
                 height={variables.moneyRequestSkeletonHeight}
                 backgroundColor={themeColors.borderLighter}
                 foregroundColor={themeColors.border}
@@ -55,5 +49,5 @@ function MoneyRequestSkeletonView(props) {
 
 MoneyRequestSkeletonView.propTypes = propTypes;
 MoneyRequestSkeletonView.defaultProps = defaultProps;
-MoneyRequestSkeletonView.displayName = 'IOUSkeletonView';
-export default compose(withWindowDimensions, withLocalize)(MoneyRequestSkeletonView);
+MoneyRequestSkeletonView.displayName = 'MoneyRequestSkeletonView';
+export default MoneyRequestSkeletonView;
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index efe415f8fb30..df4e0b4f580c 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -3,7 +3,6 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
-import lodashIsEmpty from 'lodash/isEmpty';
 import _ from 'underscore';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
@@ -229,7 +228,7 @@ function MoneyRequestPreview(props) {
                             isHovered={isScanning}
                         />
                     )}
-                    {lodashIsEmpty(props.transaction) ? (
+                    {_.isEmpty(props.transaction) ? (
                         <MoneyRequestSkeletonView />
                     ) : (
                         <View style={styles.moneyRequestPreviewBoxText}>

From 166c12dbc362f47c6abed4b5dc43cb0da5e53df3 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 01:14:47 +0530
Subject: [PATCH 07/11] fix: remove props

---
 src/components/MoneyRequestSkeletonView.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index e1f3ac813aa1..4471faa7edf2 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -2,24 +2,15 @@ import React from 'react';
 import {View} from 'react-native';
 import {Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
-import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import variables from '../styles/variables';
 import themeColors from '../styles/themes/default';
 
-const propTypes = {
-    shouldAnimate: PropTypes.bool,
-};
-
-const defaultProps = {
-    shouldAnimate: true,
-};
-
-function MoneyRequestSkeletonView(props) {
+function MoneyRequestSkeletonView() {
     return (
         <View style={[styles.flex1, styles.overflowHidden]}>
             <SkeletonViewContentLoader
-                animate={props.shouldAnimate}
+                animate
                 height={variables.moneyRequestSkeletonHeight}
                 backgroundColor={themeColors.borderLighter}
                 foregroundColor={themeColors.border}
@@ -47,7 +38,5 @@ function MoneyRequestSkeletonView(props) {
     );
 }
 
-MoneyRequestSkeletonView.propTypes = propTypes;
-MoneyRequestSkeletonView.defaultProps = defaultProps;
 MoneyRequestSkeletonView.displayName = 'MoneyRequestSkeletonView';
 export default MoneyRequestSkeletonView;

From cc9f83ffbfa568308eaab159ee6907d21ab14a3b Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 14:51:31 +0530
Subject: [PATCH 08/11] fix: correct padding

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

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index 4471faa7edf2..3587e2d5fcd0 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -22,7 +22,7 @@ function MoneyRequestSkeletonView() {
                     height="8"
                 />
                 <Rect
-                    x="15"
+                    x="16"
                     y="46"
                     width="120"
                     height="20"

From d37fcfb5b7b1ee5d5e04944720625274d595a1b6 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 18:44:50 +0530
Subject: [PATCH 09/11] style: lint fixes

---
 .../ReportActionItem/MoneyRequestPreview.js   | 120 +++++++++---------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index cda8b0d7263a..637302f7d4f0 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -238,77 +238,77 @@ function MoneyRequestPreview(props) {
                     {_.isEmpty(props.transaction) ? (
                         <MoneyRequestSkeletonView />
                     ) : (
-                    <View style={styles.moneyRequestPreviewBoxText}>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
-                                {Boolean(getSettledMessage()) && (
-                                    <>
-                                        <Icon
-                                            src={Expensicons.DotIndicator}
-                                            width={4}
-                                            height={4}
-                                            additionalStyles={[styles.mr1, styles.ml1]}
-                                        />
-                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
-                                    </>
+                        <View style={styles.moneyRequestPreviewBoxText}>
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
+                                    {Boolean(getSettledMessage()) && (
+                                        <>
+                                            <Icon
+                                                src={Expensicons.DotIndicator}
+                                                width={4}
+                                                height={4}
+                                                additionalStyles={[styles.mr1, styles.ml1]}
+                                            />
+                                            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
+                                        </>
+                                    )}
+                                </View>
+                                {hasFieldErrors && (
+                                    <Icon
+                                        src={Expensicons.DotIndicator}
+                                        fill={colors.red}
+                                    />
                                 )}
                             </View>
-                            {hasFieldErrors && (
-                                <Icon
-                                    src={Expensicons.DotIndicator}
-                                    fill={colors.red}
-                                />
-                            )}
-                        </View>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
-                                {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
-                                    <View style={styles.defaultCheckmarkWrapper}>
-                                        <Icon
-                                            src={Expensicons.Checkmark}
-                                            fill={themeColors.iconSuccessFill}
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
+                                    {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
+                                        <View style={styles.defaultCheckmarkWrapper}>
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={themeColors.iconSuccessFill}
+                                            />
+                                        </View>
+                                    )}
+                                </View>
+                                {props.isBillSplit && (
+                                    <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                        <MultipleAvatars
+                                            icons={participantAvatars}
+                                            shouldStackHorizontally
+                                            size="small"
+                                            isHovered={props.isHovered}
+                                            shouldUseCardBackground
                                         />
                                     </View>
                                 )}
                             </View>
-                            {props.isBillSplit && (
-                                <View style={styles.moneyRequestPreviewBoxAvatar}>
-                                    <MultipleAvatars
-                                        icons={participantAvatars}
-                                        shouldStackHorizontally
-                                        size="small"
-                                        isHovered={props.isHovered}
-                                        shouldUseCardBackground
-                                    />
+                            {shouldShowMerchant && (
+                                <View style={[styles.flexRow]}>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
                                 </View>
                             )}
-                        </View>
-                        {shouldShowMerchant && (
                             <View style={[styles.flexRow]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
-                            </View>
-                        )}
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1]}>
-                                {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                    <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                <View style={[styles.flex1]}>
+                                    {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
+                                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                    )}
+                                    {shouldShowDescription && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
+                                </View>
+                                {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
+                                    <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
+                                        {props.translate('iou.amountEach', {
+                                            amount: CurrencyUtils.convertToDisplayString(
+                                                IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
+                                                requestCurrency,
+                                            ),
+                                        })}
+                                    </Text>
                                 )}
-                                {shouldShowDescription && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
                             </View>
-                            {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
-                                <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
-                                    {props.translate('iou.amountEach', {
-                                        amount: CurrencyUtils.convertToDisplayString(
-                                            IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
-                                            requestCurrency,
-                                        ),
-                                    })}
-                                </Text>
-                            )}
                         </View>
-                    </View>
                     )}
                 </View>
             </OfflineWithFeedback>
@@ -359,4 +359,4 @@ export default compose(
             key: ONYXKEYS.WALLET_TERMS,
         },
     }),
-)(MoneyRequestPreview);
\ No newline at end of file
+)(MoneyRequestPreview);

From 93df38ada3aca3cb1d6bc30b943a054354819f5f Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 19:00:16 +0530
Subject: [PATCH 10/11] fix: update the design skeleton

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

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index 3587e2d5fcd0..005775d7f29c 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -1,16 +1,16 @@
 import React from 'react';
-import {View} from 'react-native';
 import {Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
-import styles from '../styles/styles';
 import variables from '../styles/variables';
 import themeColors from '../styles/themes/default';
+import styles from '../styles/styles';
 
 function MoneyRequestSkeletonView() {
     return (
-        <View style={[styles.flex1, styles.overflowHidden]}>
+        
             <SkeletonViewContentLoader
                 animate
+                width={styles.w100.width}
                 height={variables.moneyRequestSkeletonHeight}
                 backgroundColor={themeColors.borderLighter}
                 foregroundColor={themeColors.border}
@@ -34,7 +34,7 @@ function MoneyRequestSkeletonView() {
                     height="8"
                 />
             </SkeletonViewContentLoader>
-        </View>
+        
     );
 }
 

From aae804d91b03f99861f91b276bcddda194103d6e Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Mon, 4 Sep 2023 19:35:14 +0530
Subject: [PATCH 11/11] style: lint fixes

---
 src/components/MoneyRequestSkeletonView.js | 54 +++++++++++-----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
index 005775d7f29c..50a7b56b91e3 100644
--- a/src/components/MoneyRequestSkeletonView.js
+++ b/src/components/MoneyRequestSkeletonView.js
@@ -7,34 +7,32 @@ import styles from '../styles/styles';
 
 function MoneyRequestSkeletonView() {
     return (
-        
-            <SkeletonViewContentLoader
-                animate
-                width={styles.w100.width}
-                height={variables.moneyRequestSkeletonHeight}
-                backgroundColor={themeColors.borderLighter}
-                foregroundColor={themeColors.border}
-            >
-                <Rect
-                    x="16"
-                    y="20"
-                    width="40"
-                    height="8"
-                />
-                <Rect
-                    x="16"
-                    y="46"
-                    width="120"
-                    height="20"
-                />
-                <Rect
-                    x="16"
-                    y="78"
-                    width="80"
-                    height="8"
-                />
-            </SkeletonViewContentLoader>
-        
+        <SkeletonViewContentLoader
+            animate
+            width={styles.w100.width}
+            height={variables.moneyRequestSkeletonHeight}
+            backgroundColor={themeColors.borderLighter}
+            foregroundColor={themeColors.border}
+        >
+            <Rect
+                x="16"
+                y="20"
+                width="40"
+                height="8"
+            />
+            <Rect
+                x="16"
+                y="46"
+                width="120"
+                height="20"
+            />
+            <Rect
+                x="16"
+                y="78"
+                width="80"
+                height="8"
+            />
+        </SkeletonViewContentLoader>
     );
 }