From a3d31e6466dbc358c0deb2348a2510da9f579631 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 25 Oct 2023 16:12:19 -1000 Subject: [PATCH] Revert "Bidirectional pagination" --- src/CONST.ts | 7 -- src/ONYXKEYS.ts | 2 +- .../InvertedFlatList/BaseInvertedFlatList.js | 3 - .../ReportActionsSkeletonView/index.js | 17 ++-- src/libs/actions/Policy.js | 2 +- src/libs/actions/Report.js | 77 +++------------- src/pages/home/ReportScreen.js | 26 ++---- .../ListBoundaryLoader/ListBoundaryLoader.js | 73 --------------- src/pages/home/report/ReportActionsList.js | 90 +++++++------------ src/pages/home/report/ReportActionsView.js | 68 +++----------- .../withReportAndReportActionOrNotFound.js | 7 +- src/pages/reportMetadataPropTypes.js | 9 +- src/styles/styles.ts | 13 --- src/types/onyx/ReportMetadata.ts | 9 +- 14 files changed, 84 insertions(+), 319 deletions(-) delete mode 100644 src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js diff --git a/src/CONST.ts b/src/CONST.ts index 9d912a4df20e..a6106b88a532 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2779,8 +2779,6 @@ const CONST = { SCROLLING: 'scrolling', }, - CHAT_HEADER_LOADER_HEIGHT: 36, - HORIZONTAL_SPACER: { DEFAULT_BORDER_BOTTOM_WIDTH: 1, DEFAULT_MARGIN_VERTICAL: 8, @@ -2788,11 +2786,6 @@ const CONST = { HIDDEN_BORDER_BOTTOM_WIDTH: 0, }, - LIST_COMPONENTS: { - HEADER: 'header', - FOOTER: 'footer', - }, - GLOBAL_NAVIGATION_OPTION: { HOME: 'home', CHATS: 'chats', diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 646e23c8af1e..8d7344f8a2d7 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -244,7 +244,7 @@ const ONYXKEYS = { POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_', WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_', REPORT: 'report_', - // REPORT_METADATA is a perf optimization used to hold loading states (isLoadingInitialReportActions, isLoadingOlderReportActions, isLoadingNewerReportActions). + // REPORT_METADATA is a perf optimization used to hold loading states (isLoadingReportActions, isLoadingMoreReportActions). // A lot of components are connected to the Report entity and do not care about the actions. Setting the loading state // directly on the report caused a lot of unnecessary re-renders REPORT_METADATA: 'reportMetadata_', diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index baee08eae4cd..ba0bdd5d71ff 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -133,9 +133,6 @@ function BaseInvertedFlatList(props) { // Web requires that items be measured or else crazy things happen when scrolling. getItemLayout={shouldMeasureItems ? getItemLayout : undefined} windowSize={15} - maintainVisibleContentPosition={{ - minIndexForVisible: 0, - }} inverted /> ); diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 6efda2682ecd..6bdc993c2055 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -7,26 +7,23 @@ import CONST from '../../CONST'; const propTypes = { /** Whether to animate the skeleton view */ shouldAnimate: PropTypes.bool, - - /** Number of possible visible content items */ - possibleVisibleContentItems: PropTypes.number, }; const defaultProps = { shouldAnimate: true, - possibleVisibleContentItems: 0, }; -function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) { - const contentItems = possibleVisibleContentItems || Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); +function ReportActionsSkeletonView(props) { + // Determines the number of content items based on container height + const possibleVisibleContentItems = Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT); const skeletonViewLines = []; - for (let index = 0; index < contentItems; index++) { + for (let index = 0; index < possibleVisibleContentItems; index++) { const iconIndex = (index + 1) % 4; switch (iconIndex) { case 2: skeletonViewLines.push( , @@ -35,7 +32,7 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) case 0: skeletonViewLines.push( , @@ -44,7 +41,7 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) default: skeletonViewLines.push( , diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js index 0e063d3e0c48..3375cabae223 100644 --- a/src/libs/actions/Policy.js +++ b/src/libs/actions/Policy.js @@ -372,7 +372,7 @@ function createPolicyExpenseChats(policyID, invitedEmailsToAccountIDs) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${optimisticReport.reportID}`, value: { - isLoadingInitialReportActions: false, + isLoadingReportActions: false, }, }); }); diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 98d407d1e8b5..435c49860783 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -477,9 +477,8 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingInitialReportActions: true, - isLoadingOlderReportActions: false, - isLoadingNewerReportActions: false, + isLoadingReportActions: true, + isLoadingMoreReportActions: false, }, }, ]; @@ -502,7 +501,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingInitialReportActions: false, + isLoadingReportActions: false, }, }, ]; @@ -512,7 +511,7 @@ function openReport(reportID, participantLoginList = [], newReportObject = {}, p onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingInitialReportActions: false, + isLoadingReportActions: false, }, }, ]; @@ -738,9 +737,8 @@ function reconnect(reportID) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingInitialReportActions: true, - isLoadingNewerReportActions: false, - isLoadingOlderReportActions: false, + isLoadingReportActions: true, + isLoadingMoreReportActions: false, }, }, ], @@ -749,7 +747,7 @@ function reconnect(reportID) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingInitialReportActions: false, + isLoadingReportActions: false, }, }, ], @@ -758,7 +756,7 @@ function reconnect(reportID) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingInitialReportActions: false, + isLoadingReportActions: false, }, }, ], @@ -773,9 +771,9 @@ function reconnect(reportID) { * @param {String} reportID * @param {String} reportActionID */ -function getOlderActions(reportID, reportActionID) { +function readOldestAction(reportID, reportActionID) { API.read( - 'GetOlderActions', + 'ReadOldestAction', { reportID, reportActionID, @@ -786,7 +784,7 @@ function getOlderActions(reportID, reportActionID) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingOlderReportActions: true, + isLoadingMoreReportActions: true, }, }, ], @@ -795,7 +793,7 @@ function getOlderActions(reportID, reportActionID) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingOlderReportActions: false, + isLoadingMoreReportActions: false, }, }, ], @@ -804,53 +802,7 @@ function getOlderActions(reportID, reportActionID) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, value: { - isLoadingOlderReportActions: false, - }, - }, - ], - }, - ); -} - -/** - * Gets the newer actions that have not been read yet. - * Normally happens when you are not located at the bottom of the list and scroll down on a chat. - * - * @param {String} reportID - * @param {String} reportActionID - */ -function getNewerActions(reportID, reportActionID) { - API.read( - 'GetNewerActions', - { - reportID, - reportActionID, - }, - { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, - value: { - isLoadingNewerReportActions: true, - }, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, - value: { - isLoadingNewerReportActions: false, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, - value: { - isLoadingNewerReportActions: false, + isLoadingMoreReportActions: false, }, }, ], @@ -2459,6 +2411,7 @@ export { expandURLPreview, markCommentAsUnread, readNewestAction, + readOldestAction, openReport, openReportFromDeepLink, navigateToAndOpenReport, @@ -2483,8 +2436,6 @@ export { getReportPrivateNote, clearPrivateNotesError, hasErrorInPrivateNotes, - getOlderActions, - getNewerActions, openRoomMembersPage, savePrivateNotesDraft, getDraftPrivateNote, diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 1b6dd9186453..32a14303e9a7 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -106,9 +106,8 @@ const defaultProps = { hasOutstandingIOU: false, }, reportMetadata: { - isLoadingInitialReportActions: true, - isLoadingOlderReportActions: false, - isLoadingNewerReportActions: false, + isLoadingReportActions: true, + isLoadingMoreReportActions: false, }, isComposerFullSize: false, betas: [], @@ -166,7 +165,7 @@ function ReportScreen({ const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}]; // There are no reportActions at all to display and we are still in the process of loading the next set of actions. - const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions; + const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingReportActions; const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED; @@ -261,13 +260,6 @@ function ReportScreen({ const onSubmitComment = useCallback( (text) => { Report.addComment(getReportID(route), text); - - // We need to scroll to the bottom of the list after the comment is added - const refID = setTimeout(() => { - flatListRef.current.scrollToOffset({animated: false, offset: 0}); - }, 10); - - return () => clearTimeout(refID); }, [route], ); @@ -380,7 +372,7 @@ function ReportScreen({ // eslint-disable-next-line rulesdir/no-negated-variables const shouldShowNotFoundPage = useMemo( - () => (!firstRenderRef.current && !report.reportID && !isOptimisticDelete && !reportMetadata.isLoadingInitialReportActions && !isLoading && !userLeavingStatus) || shouldHideReport, + () => (!firstRenderRef.current && !report.reportID && !isOptimisticDelete && !reportMetadata.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport, [report, reportMetadata, isLoading, shouldHideReport, isOptimisticDelete, userLeavingStatus], ); @@ -436,9 +428,8 @@ function ReportScreen({ @@ -497,9 +488,8 @@ export default compose( reportMetadata: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, initialValue: { - isLoadingInitialReportActions: true, - isLoadingOlderReportActions: false, - isLoadingNewerReportActions: false, + isLoadingReportActions: true, + isLoadingMoreReportActions: false, }, }, isComposerFullSize: { diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js deleted file mode 100644 index 97e79e96dac7..000000000000 --- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import {ActivityIndicator, View} from 'react-native'; -import PropTypes from 'prop-types'; -import ReportActionsSkeletonView from '../../../../components/ReportActionsSkeletonView'; -import CONST from '../../../../CONST'; -import useNetwork from '../../../../hooks/useNetwork'; -import styles, {stylesGenerator} from '../../../../styles/styles'; -import themeColors from '../../../../styles/themes/default'; - -const propTypes = { - /** type of rendered loader. Can be 'header' or 'footer' */ - type: PropTypes.oneOf([CONST.LIST_COMPONENTS.HEADER, CONST.LIST_COMPONENTS.FOOTER]).isRequired, - - /** Shows if we call fetching older report action */ - isLoadingOlderReportActions: PropTypes.bool, - - /* Shows if we call initial loading of report action */ - isLoadingInitialReportActions: PropTypes.bool, - - /** Shows if we call fetching newer report action */ - isLoadingNewerReportActions: PropTypes.bool, - - /** Name of the last report action */ - lastReportActionName: PropTypes.string, -}; - -const defaultProps = { - isLoadingOlderReportActions: false, - isLoadingInitialReportActions: false, - isLoadingNewerReportActions: false, - lastReportActionName: '', -}; - -function ListBoundaryLoader({type, isLoadingOlderReportActions, isLoadingInitialReportActions, lastReportActionName, isLoadingNewerReportActions}) { - const {isOffline} = useNetwork(); - - // we use two different loading components for header and footer to reduce the jumping effect when you scrolling to the newer reports - if (type === CONST.LIST_COMPONENTS.FOOTER) { - if (isLoadingOlderReportActions) { - return ; - } - - // Make sure the oldest report action loaded is not the first. This is so we do not show the - // skeleton view above the created action in a newly generated optimistic chat or one with not - // that many comments. - if (isLoadingInitialReportActions && lastReportActionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) { - return ( - - ); - } - } - if (type === CONST.LIST_COMPONENTS.HEADER && isLoadingNewerReportActions) { - // applied for a header of the list, i.e. when you scroll to the bottom of the list - // the styles for android and the rest components are different that's why we use two different components - return ( - - - - ); - } -} - -ListBoundaryLoader.propTypes = propTypes; -ListBoundaryLoader.defaultProps = defaultProps; -ListBoundaryLoader.displayName = 'ListBoundaryLoader'; - -export default ListBoundaryLoader; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 300b1921545d..3cdd8ece876f 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -7,10 +7,11 @@ import lodashGet from 'lodash/get'; import CONST from '../../../CONST'; import InvertedFlatList from '../../../components/InvertedFlatList'; import {withPersonalDetails} from '../../../components/OnyxProvider'; +import ReportActionsSkeletonView from '../../../components/ReportActionsSkeletonView'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import useNetwork from '../../../hooks/useNetwork'; import useLocalize from '../../../hooks/useLocalize'; +import useNetwork from '../../../hooks/useNetwork'; import useReportScrollManager from '../../../hooks/useReportScrollManager'; import DateUtils from '../../../libs/DateUtils'; import * as ReportUtils from '../../../libs/ReportUtils'; @@ -22,7 +23,6 @@ import reportPropTypes from '../../reportPropTypes'; import FloatingMessageCounter from './FloatingMessageCounter'; import ReportActionsListItemRenderer from './ReportActionsListItemRenderer'; import reportActionPropTypes from './reportActionPropTypes'; -import ListBoundaryLoader from './ListBoundaryLoader/ListBoundaryLoader'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; const propTypes = { @@ -36,13 +36,10 @@ const propTypes = { mostRecentIOUReportActionID: PropTypes.string, /** The report metadata loading states */ - isLoadingInitialReportActions: PropTypes.bool, + isLoadingReportActions: PropTypes.bool, /** Are we loading more report actions? */ - isLoadingOlderReportActions: PropTypes.bool, - - /** Are we loading newer report actions? */ - isLoadingNewerReportActions: PropTypes.bool, + isLoadingMoreReportActions: PropTypes.bool, /** Callback executed on list layout */ onLayout: PropTypes.func.isRequired, @@ -51,10 +48,7 @@ const propTypes = { onScroll: PropTypes.func, /** Function to load more chats */ - loadOlderChats: PropTypes.func.isRequired, - - /** Function to load newer chats */ - loadNewerChats: PropTypes.func.isRequired, + loadMoreChats: PropTypes.func.isRequired, /** The policy object for the current route */ policy: PropTypes.shape({ @@ -73,9 +67,8 @@ const defaultProps = { personalDetails: {}, onScroll: () => {}, mostRecentIOUReportActionID: '', - isLoadingInitialReportActions: false, - isLoadingOlderReportActions: false, - isLoadingNewerReportActions: false, + isLoadingReportActions: false, + isLoadingMoreReportActions: false, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -114,9 +107,8 @@ function isMessageUnread(message, lastReadTime) { function ReportActionsList({ report, - isLoadingInitialReportActions, - isLoadingOlderReportActions, - isLoadingNewerReportActions, + isLoadingReportActions, + isLoadingMoreReportActions, sortedReportActions, windowHeight, onScroll, @@ -125,8 +117,7 @@ function ReportActionsList({ personalDetailsList, currentUserPersonalDetails, hasOutstandingIOU, - loadNewerChats, - loadOlderChats, + loadMoreChats, onLayout, isComposerFullSize, }) { @@ -139,9 +130,8 @@ function ReportActionsList({ const [currentUnreadMarker, setCurrentUnreadMarker] = useState(null); const scrollingVerticalOffset = useRef(0); const readActionSkipped = useRef(false); - const hasHeaderRendered = useRef(false); - const hasFooterRendered = useRef(false); const reportActionSize = useRef(sortedReportActions.length); + const firstRenderRef = useRef(true); const linkedReportActionID = lodashGet(route, 'params.reportActionID', ''); // This state is used to force a re-render when the user manually marks a message as unread @@ -352,30 +342,28 @@ function ReportActionsList({ const hideComposer = ReportUtils.shouldDisableWriteActions(report); const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(personalDetailsList, report, currentUserPersonalDetails.accountID) && !isComposerFullSize; - const contentContainerStyle = useMemo( - () => [styles.chatContentScrollView, isLoadingNewerReportActions ? styles.chatContentScrollViewWithHeaderLoader : {}], - [isLoadingNewerReportActions], - ); - - const lastReportAction = useMemo(() => _.last(sortedReportActions) || {}, [sortedReportActions]); - - const listFooterComponent = useCallback(() => { + const renderFooter = useCallback(() => { // Skip this hook on the first render, as we are not sure if more actions are going to be loaded // Therefore showing the skeleton on footer might be misleading - if (!hasFooterRendered.current) { - hasFooterRendered.current = true; + if (firstRenderRef.current) { + firstRenderRef.current = false; return null; } - return ( - - ); - }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName]); + if (isLoadingMoreReportActions) { + return ; + } + + // Make sure the oldest report action loaded is not the first. This is so we do not show the + // skeleton view above the created action in a newly generated optimistic chat or one with not + // that many comments. + const lastReportAction = _.last(sortedReportActions) || {}; + if (isLoadingReportActions && lastReportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) { + return ; + } + + return null; + }, [isLoadingMoreReportActions, isLoadingReportActions, sortedReportActions, isOffline]); const onLayoutInner = useCallback( (event) => { @@ -384,19 +372,6 @@ function ReportActionsList({ [onLayout], ); - const listHeaderComponent = useCallback(() => { - if (!hasHeaderRendered.current) { - hasHeaderRendered.current = true; - return null; - } - return ( - - ); - }, [isLoadingNewerReportActions]); - return ( <> 0); const mostRecentIOUReportActionID = useRef(ReportActionsUtils.getMostRecentIOURequestActionID(props.reportActions)); @@ -147,9 +142,9 @@ function ReportActionsView(props) { * Retrieves the next set of report actions for the chat once we are nearing the end of what we are currently * displaying. */ - const loadOlderChats = () => { + const loadMoreChats = () => { // Only fetch more if we are not already fetching so that we don't initiate duplicate requests. - if (props.isLoadingOlderReportActions) { + if (props.isLoadingMoreReportActions) { return; } @@ -159,42 +154,11 @@ function ReportActionsView(props) { if (oldestReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { return; } + // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments - Report.getOlderActions(reportID, oldestReportAction.reportActionID); + Report.readOldestAction(reportID, oldestReportAction.reportActionID); }; - /** - * Retrieves the next set of report actions for the chat once we are nearing the end of what we are currently - * displaying. - */ - const loadNewerChats = useMemo( - () => - _.throttle(({distanceFromStart}) => { - if (props.isLoadingNewerReportActions || props.isLoadingInitialReportActions) { - return; - } - - // Ideally, we wouldn't need to use the 'distanceFromStart' variable. However, due to the low value set for 'maxToRenderPerBatch', - // the component undergoes frequent re-renders. This frequent re-rendering triggers the 'onStartReached' callback multiple times. - // - // To mitigate this issue, we use 'CONST.CHAT_HEADER_LOADER_HEIGHT' as a threshold. This ensures that 'onStartReached' is not - // triggered unnecessarily when the chat is initially opened or when the user has reached the end of the list but hasn't scrolled further. - // - // Additionally, we use throttling on the 'onStartReached' callback to further reduce the frequency of its invocation. - // This should be removed once the issue of frequent re-renders is resolved. - // - // onStartReached is triggered during the first render. Since we use OpenReport on the first render and are confident about the message ordering, we can safely skip this call - if (isFirstRender.current || distanceFromStart <= CONST.CHAT_HEADER_LOADER_HEIGHT) { - isFirstRender.current = false; - return; - } - - const newestReportAction = _.first(props.reportActions); - Report.getNewerActions(reportID, newestReportAction.reportActionID); - }, 500), - [props.isLoadingNewerReportActions, props.isLoadingInitialReportActions, props.reportActions, reportID], - ); - /** * Runs when the FlatList finishes laying out */ @@ -227,11 +191,9 @@ function ReportActionsView(props) { onLayout={recordTimeToMeasureItemLayout} sortedReportActions={props.reportActions} mostRecentIOUReportActionID={mostRecentIOUReportActionID.current} - loadOlderChats={loadOlderChats} - loadNewerChats={loadNewerChats} - isLoadingInitialReportActions={props.isLoadingInitialReportActions} - isLoadingOlderReportActions={props.isLoadingOlderReportActions} - isLoadingNewerReportActions={props.isLoadingNewerReportActions} + isLoadingReportActions={props.isLoadingReportActions} + isLoadingMoreReportActions={props.isLoadingMoreReportActions} + loadMoreChats={loadMoreChats} policy={props.policy} /> @@ -260,15 +222,11 @@ function arePropsEqual(oldProps, newProps) { return false; } - if (oldProps.isLoadingInitialReportActions !== newProps.isLoadingInitialReportActions) { - return false; - } - - if (oldProps.isLoadingOlderReportActions !== newProps.isLoadingOlderReportActions) { + if (oldProps.isLoadingMoreReportActions !== newProps.isLoadingMoreReportActions) { return false; } - if (oldProps.isLoadingNewerReportActions !== newProps.isLoadingNewerReportActions) { + if (oldProps.isLoadingReportActions !== newProps.isLoadingReportActions) { return false; } diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.js b/src/pages/home/report/withReportAndReportActionOrNotFound.js index a14293e71c67..2d2df68a875e 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.js +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.js @@ -67,9 +67,8 @@ export default function (WrappedComponent) { reportActions: {}, report: {}, reportMetadata: { - isLoadingInitialReportActions: false, - isLoadingOlderReportActions: false, - isLoadingNewerReportActions: false, + isLoadingReportActions: false, + isLoadingMoreReportActions: false, }, policies: {}, betas: [], @@ -103,7 +102,7 @@ export default function (WrappedComponent) { // Perform all the loading checks const isLoadingReport = props.isLoadingReportData && (_.isEmpty(props.report) || !props.report.reportID); - const isLoadingReportAction = _.isEmpty(props.reportActions) || (props.reportMetadata.isLoadingInitialReportActions && _.isEmpty(getReportAction())); + const isLoadingReportAction = _.isEmpty(props.reportActions) || (props.reportMetadata.isLoadingReportActions && _.isEmpty(getReportAction())); const shouldHideReport = !isLoadingReport && (_.isEmpty(props.report) || !props.report.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.betas)); if ((isLoadingReport || isLoadingReportAction) && !shouldHideReport) { diff --git a/src/pages/reportMetadataPropTypes.js b/src/pages/reportMetadataPropTypes.js index 65ed01952977..a75d71aef7b3 100644 --- a/src/pages/reportMetadataPropTypes.js +++ b/src/pages/reportMetadataPropTypes.js @@ -1,12 +1,9 @@ import PropTypes from 'prop-types'; export default PropTypes.shape({ - /** Are we loading newer report actions? */ - isLoadingNewerReportActions: PropTypes.bool, - - /** Are we loading older report actions? */ - isLoadingOlderReportActions: PropTypes.bool, + /** Are we loading more report actions? */ + isLoadingMoreReportActions: PropTypes.bool, /** Flag to check if the report actions data are loading */ - isLoadingInitialReportActions: PropTypes.bool, + isLoadingReportActions: PropTypes.bool, }); diff --git a/src/styles/styles.ts b/src/styles/styles.ts index d08b947ff680..d66a514a14c7 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1640,10 +1640,6 @@ const styles = (theme: ThemeDefault) => width: 18, }, - chatContentScrollViewWithHeaderLoader: { - paddingTop: CONST.CHAT_HEADER_LOADER_HEIGHT, - }, - chatContentScrollView: { flexGrow: 1, justifyContent: 'flex-start', @@ -3894,15 +3890,6 @@ const styles = (theme: ThemeDefault) => width: '100%', }, - chatBottomLoader: { - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0, - height: CONST.CHAT_HEADER_LOADER_HEIGHT, - }, - videoContainer: { ...flex.flex1, ...flex.alignItemsCenter, diff --git a/src/types/onyx/ReportMetadata.ts b/src/types/onyx/ReportMetadata.ts index 8c13e0f127b8..3e389c8cff4f 100644 --- a/src/types/onyx/ReportMetadata.ts +++ b/src/types/onyx/ReportMetadata.ts @@ -1,12 +1,9 @@ type ReportMetadata = { - /** Are we loading newer report actions? */ - isLoadingNewerReportActions?: boolean; - - /** Are we loading older report actions? */ - isLoadingOlderReportActions?: boolean; + /** Are we loading more report actions? */ + isLoadingMoreReportActions?: boolean; /** Flag to check if the report actions data are loading */ - isLoadingInitialReportActions?: boolean; + isLoadingReportActions?: boolean; }; export default ReportMetadata;