From 35076a4efe88afa9c85ea43e2822924b67970291 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Fri, 15 Sep 2023 13:33:41 +0200
Subject: [PATCH] change loader

---
 src/pages/home/report/ReportActionsList.js | 19 +++++++++++--------
 src/styles/styles.js                       |  3 +++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 1336b2d42ecd..86087330da9b 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useState, useRef, useMemo} from 'react';
+import {ActivityIndicator, View} from 'react-native';
+import PropTypes from 'prop-types';
 import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated';
 import _ from 'underscore';
 import InvertedFlatList from '../../../components/InvertedFlatList';
@@ -21,6 +22,7 @@ import reportPropTypes from '../../reportPropTypes';
 import useLocalize from '../../../hooks/useLocalize';
 import useNetwork from '../../../hooks/useNetwork';
 import DateUtils from '../../../libs/DateUtils';
+import themeColors from '../../../styles/themes/default';
 import FloatingMessageCounter from './FloatingMessageCounter';
 import useReportScrollManager from '../../../hooks/useReportScrollManager';
 
@@ -323,13 +325,6 @@ function ReportActionsList({
 
                         return null;
                     }}
-                    ListHeaderComponent={() => {
-                        if (report.isLoadingOlderReportActions) {
-                            return <ReportActionsSkeletonView containerHeight={CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT * 3} />;
-                        }
-
-                        return null;
-                    }}
                     keyboardShouldPersistTaps="handled"
                     onLayout={(event) => {
                         setSkeletonViewHeight(event.nativeEvent.layout.height);
@@ -339,6 +334,14 @@ function ReportActionsList({
                     extraData={extraData}
                 />
             </Animated.View>
+            {report.isLoadingNewerReportActions ? (
+                <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.bottomReportLoader]}>
+                    <ActivityIndicator
+                        color={themeColors.spinner}
+                        size="small"
+                    />
+                </View>
+            ) : null}
         </>
     );
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index e81e03726c78..f6dac73e867f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3959,6 +3959,9 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
+    bottomReportLoader: {
+      height: 40,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument