[HOLD for payment 2022-02-14] FEATURE REQUEST: Update the empty state of a chat to be center aligned and show persistently

[mvtglobally]

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. Open app
2. Start a chat with a new user

Expected Result:

Show the "room header" only. When you start chatting, the room header (including avatar and pronouns) continues showing, and gradually scrolls off the top

Actual Result / Context:

Currently we just knifeswitch from one to the next: when you write your first message, the empty state (with the avatar image and pronouns) disappears. However, rather than viewing the avatar/pronouns as an "empty state", I suggest we rethink it to just be the "room header" -- more like Slack. In our upcoming E2E design, we are going to start out every room with a system message explaining the encryption status, meaning that we will never have truly "empty" rooms anymore -- every room starts out with at least one chat.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.26-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

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

Job post: https://www.upwork.com/jobs/~014d802fc87539cff9

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[sig5]

Proposal
According to the problem, the Empty state has to be shown at the very top of the list of messages.
We can change the following lines in ReportActionsView.js

Changes

1. Since we want to show the header irrespective of if the chat has started or not, there is no need for the conditional rendering of the following subcomponent.
   

   App/src/pages/home/report/ReportActionsView.js

   Lines 548 to 560 in 6067100

   	// If we only have the created action then no one has left a comment
   	if (_.size(this.props.reportActions) === 1) {
   	return (
   	<View style={[styles.chatContent, styles.chatContentEmpty]}>
   	<View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
   	<EmptyStateAvatars
   	avatarImageURLs={this.props.report.icons}
   	secondAvatarStyle={[styles.secondAvatarHovered]}
   	isChatRoom={isChatRoom}
   	/>
   	<ReportWelcomeText report={this.props.report} shouldIncludeParticipants={!isChatRoom} />
   	</View>
   	</View>

2. We can rather append it as a ListFooter object, and conditionally render it in case no more messages are available (Line 593).
   

   App/src/pages/home/report/ReportActionsView.js

   Lines 578 to 600 in 6067100

   	ref={ReportScrollManager.flatListRef}
   	data={this.sortedReportActions}
   	renderItem={this.renderItem}
   	CellRendererComponent={this.renderCell}
   	contentContainerStyle={[
   	styles.chatContentScrollView,
   	shouldShowReportRecipientLocalTime && styles.pt0,
   	]}
   	keyExtractor={this.keyExtractor}
   	initialRowHeight={32}
   	initialNumToRender={this.calculateInitialNumToRender()}
   	onEndReached={this.loadMoreChats}
   	onEndReachedThreshold={0.75}
   	ListFooterComponent={this.props.isLoadingReportActions
   	? <ActivityIndicator size="small" color={themeColors.spinner} />
   	: null}
   	keyboardShouldPersistTaps="handled"
   	onLayout={this.recordTimeToMeasureItemLayout}
   	onScroll={this.trackScroll}
   	extraData={extraData}
   	/>
   	<PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
   	</>

3. Appropriate Styling and animation styles will be added to make the component seamless.

The above approach seems to work well without any issues.

Screenshots
w/o styling and animation.

[parasharrajat]

@sig5 This issue is not yet triaged. Could you please wait before proposing?

[sig5]

Sorry. Did it in a jiffy. Will do!

[MelvinBot]

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

[tylerkaraszewski]

I was assigned as triage here but I don't have any strong opinions on this issue. Would anyone else like to chime in on this?