Remove containerHeight from ReportActionsSkeletonView because onLayou…

…tEvent is too slow
Expensify · Sep 14, 2023 · ffaf7a8 · ffaf7a8
1 parent d761db0
commit ffaf7a8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {View, Dimensions} from 'react-native';
 import SkeletonViewLines from './SkeletonViewLines';
 import CONST from '../../CONST';
 
 const propTypes = {
-    /** Height of the container component */
-    containerHeight: PropTypes.number.isRequired,
 
     /** Whether to animate the skeleton view */
     shouldAnimate: PropTypes.bool,
@@ -18,7 +16,7 @@ const defaultProps = {
 
 function ReportActionsSkeletonView(props) {
     // Determines the number of content items based on container height
-    const possibleVisibleContentItems = Math.ceil(props.containerHeight / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
+    const possibleVisibleContentItems = Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
     const skeletonViewLines = [];
     for (let index = 0; index < possibleVisibleContentItems; index++) {
         const iconIndex = (index + 1) % 4;

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
@@ -368,22 +368,23 @@ function ReportScreen({
                                     />
                                 )}
 
-                                {/* Note: The ReportActionsSkeletonView should be allowed to mount even if the initial report actions are not loaded. If we prevent rendering the report while they are loading then
-                            we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */}
-                                {(!isReportReadyForDisplay || isLoadingInitialReportActions || isLoading) && <ReportActionsSkeletonView containerHeight={skeletonViewContainerHeight} />}
+                                {/* Note: The ReportActionsSkeletonView should be allowed to mount even if the initial report actions are not loaded.
+                                    If we prevent rendering the report while they are loading then
+                                    we'll unnecessarily unmount the ReportActionsView which will clear the new marker lines initial state. */}
+                                {(!isReportReadyForDisplay || isLoadingInitialReportActions || isLoading) && 
+                                    <ReportActionsSkeletonView />
+                                }
 
                                 {isReportReadyForDisplay ? (
-                                    <>
-                                        <ReportFooter
-                                            pendingAction={addWorkspaceRoomOrChatPendingAction}
-                                            isOffline={network.isOffline}
-                                            reportActions={reportActions}
-                                            report={report}
-                                            isComposerFullSize={isComposerFullSize}
-                                            onSubmitComment={onSubmitComment}
-                                            policies={policies}
-                                        />
-                                    </>
+                                    <ReportFooter
+                                        pendingAction={addWorkspaceRoomOrChatPendingAction}
+                                        isOffline={network.isOffline}
+                                        reportActions={reportActions}
+                                        report={report}
+                                        isComposerFullSize={isComposerFullSize}
+                                        onSubmitComment={onSubmitComment}
+                                        policies={policies}
+                                    />
                                 ) : (
                                     <ReportFooter
                                         shouldDisableCompose