[$250] BUG: when flipping between chats, the composer box is gone and only the skeleton UI shows.

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to ND and login
2. Open any chat
3. Switch between chats

Expected Result:

Composer window should not disappear

Actual Result:

composer window disappears between chats and the UI jumping around.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android

Version Number: 1.2.17-1
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Recording.716.mp4

Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1666030320048069

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @PauloGasparSv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[melvin-bot]

Current assignee @mountiny is eligible for the External assigner, not assigning anyone new.

[mountiny]

This can definitely be external issue, the UI jumps are not great, lets make sure it is spotless

[MitchExpensify]

Upwork Job

[chauchausoup]

Proposal:

Issue:
Issue is caused due to ReportFooter component being wrapped along with the ReportActionsView here at:

App/src/pages/home/ReportScreen.js

Line 297 in fbf0334

<ReportFooter

that is rendered by a conditional logic to check the Loading effect in the app.

Solution:
We can simple take the ReportFooter component and keep it outside the conditional wrapper as:

From:

         {this.shouldShowLoader()
                                ? (
                                    <ReportActionsSkeletonView
                                        containerHeight={this.state.skeletonViewContainerHeight}
                                    />
                                )
                                : (
                                    <>
                                        <ReportActionsView
                                            reportActions={this.props.reportActions}
                                            report={this.props.report}
                                            session={this.props.session}
                                            isComposerFullSize={this.props.isComposerFullSize}
                                            isDrawerOpen={this.props.isDrawerOpen}
                                        />
                                        <ReportFooter
                                            addWorkspaceRoomErrors={addWorkspaceRoomErrors}
                                            addWorkspaceRoomPendingAction={addWorkspaceRoomPendingAction}
                                            isOffline={this.props.network.isOffline}
                                            reportActions={this.props.reportActions}
                                            report={this.props.report}
                                            isComposerFullSize={this.props.isComposerFullSize}
                                            onSubmitComment={this.onSubmitComment}
                                        />
                                    </>
                                )}

To:

{ this.shouldShowLoader()
                                ? (
                                    <ReportActionsSkeletonView
                                        containerHeight={this.state.skeletonViewContainerHeight}
                                    />
                                )
                                : (
                                    <>
                                        <ReportActionsView
                                            reportActions={this.props.reportActions}
                                            report={this.props.report}
                                            session={this.props.session}
                                            isComposerFullSize={this.props.isComposerFullSize}
                                            isDrawerOpen={this.props.isDrawerOpen}
                                        />

                                    </>
                                )}
                            <ReportFooter
                                addWorkspaceRoomErrors={addWorkspaceRoomErrors}
                                addWorkspaceRoomPendingAction={addWorkspaceRoomPendingAction}
                                isOffline={this.props.network.isOffline}
                                reportActions={this.props.reportActions}
                                report={this.props.report}
                                isComposerFullSize={this.props.isComposerFullSize}
                                onSubmitComment={this.onSubmitComment}
                            />
                            

[rushatgabhane]

@chauchausoup nice and simple! i like that you've mentioned the cause as well.

[rushatgabhane]

@mountiny let's go ahead with @chauchausoup's proposal

🎀 👀 🎀 C+ reviewed

[melvin-bot]

📣 @chauchausoup You have been assigned to this job by @mountiny!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mountiny]

Thank you for the review @rushatgabhane, can you please raise a PR @chauchausoup ?

[chauchausoup]

Sure @mountiny will spin it in few hours.

[mountiny]

PR is in a review.

[0xmiros]

This is duplicated with #11856.
Accepted proposal here simply reverts #11853 which fixes #11840 so it causes regression.
@rushatgabhane you're also C+ on #11856 so please check my proposal.

[mountiny]

@rushatgabhane Can you confirm if the regression would be avoided in here? Thank you for looking into this 🙇

[rushatgabhane]

@mountiny PR #11840 would indeed cause the regression.

[mountiny]

😬 Thank you for confirming @rushatgabhane and thanks for pointing this out @0xmiroslav

@chauchausoup can you think of a way how to prevent the regression from happening and solving this issue? Otherwise I am afraid we will have to open this for new proposals.

[rushatgabhane]

@mountiny @0xmiroslav's proposal would fix the issue and not cause any regression :)

[rushatgabhane]

So a way to move forward could be close this issue and the linked PR in favor of #11856

[mountiny]

Oh perfect, @rushatgabhane, thanks!

I think we can close this one then, since it is duplicate and the other issue has higher reward.

I am sorry @chauchausoup this did not work out, thank you so much for your efforts but we cannot proceed with that proposal given it would introduce regression.

[chauchausoup]

I dint understand whats happening. How do it cause regression when my proposal is not even deployed?

[chauchausoup]

My proposal was posted earlier than @0xmiroslav 's right?

[mountiny]

@chauchausoup sorry for the confusion. You can read this comment, the solution you have proposed is a revert of a PR which fixed a regression.

Rushat has confirmed that your PR is experiencing the issue so it would cause a regression unfortunately. I realize you have proposed solution earlier however, since this solution has a bug, the next proposal which avoids it goes forward.

Apologies for this.