Merge pull request #16705 from getusha/make-compose-box-accessible-on…

…load-and-offline Make Compose box accessible before the chat loads
Expensify · Mar 31, 2023 · 265f8bf · 265f8bf
2 parents ef54707 + c28e0ea
commit 265f8bf
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
@@ -35,6 +35,8 @@ import ReportHeaderSkeletonView from '../../components/ReportHeaderSkeletonView'
 import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import personalDetailsPropType from '../personalDetailsPropType';
+import EmojiPicker from '../../components/EmojiPicker/EmojiPicker';
+import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -292,14 +294,23 @@ class ReportScreen extends React.Component {
                             }}
                         >
                             {(this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading) && (
+                                <ReportActionsView
+                                    reportActions={this.props.reportActions}
+                                    report={this.props.report}
+                                    isComposerFullSize={this.props.isComposerFullSize}
+                                    isDrawerOpen={this.props.isDrawerOpen}
+                                    parentViewHeight={this.state.skeletonViewContainerHeight}
+                                />
+                            )}
+
+                            {/* Note: The report 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. */}
+                            {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && (
+                                <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
+                            )}
+
+                            {this.isReportReadyForDisplay() && (
                                 <>
-                                    <ReportActionsView
-                                        reportActions={this.props.reportActions}
-                                        report={this.props.report}
-                                        isComposerFullSize={this.props.isComposerFullSize}
-                                        isDrawerOpen={this.props.isDrawerOpen}
-                                        parentViewHeight={this.state.skeletonViewContainerHeight}
-                                    />
                                     <ReportFooter
                                         errors={addWorkspaceRoomOrChatErrors}
                                         pendingAction={addWorkspaceRoomOrChatPendingAction}
@@ -309,15 +320,7 @@ class ReportScreen extends React.Component {
                                         isComposerFullSize={this.props.isComposerFullSize}
                                         onSubmitComment={this.onSubmitComment}
                                     />
-                                </>
-                            )}
-
-                            {/* Note: The report 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. */}
-                            {(!this.isReportReadyForDisplay() || isLoadingInitialReportActions || isLoading) && (
-                                <>
-                                    <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
-                                    <ReportFooter shouldDisableCompose isOffline={this.props.network.isOffline} />
+                                    <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                                 </>
                             )}
                             <PortalHost name={CONST.REPORT.DROP_HOST_NAME} />