BUG: Loading chat preview stuck after creating new chat while offline

[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. Log into Expensify on desktop with Device A
2. On Device B, any platform, log in to another account that has never chatted with account on device A
3. Disable your internet connection on Device A. WiFi > OFF
4. On Device B, send a message to the account logged in device A
5. On Device A, navigate to LHN (mobile) or to another conversation (Desktop/Web)
6. Enable the internet connection on Device A.
7. Ensure the message you sent via Device B is received on Device A
8. Disable the internet connection on Device A
9. Click/tap on the bold chat in LHN in Device A

Expected Result:

Chat should load despite being offline and look like a normal chat

Actual Result:

Chat is loading, but grey loading chat screen is stuck and will not go away after going back online or refreshing app

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.18-7
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.775.mp4

ChatLoading.mov

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

View all open jobs on GitHub

[melvin-bot]

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

[krishnemd]

Problem:
Issue is caused by this prop here in InvertedFlat list. Since we are removing the Skeleton effect in compose bar too as per this issue #11962 removing the prop and adding null instead might help us overcome such scenarios.

Solution:

ListFooterComponent={null}

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

Line 190 in 245ea00

ListFooterComponent={this.props.isLoadingMoreReportActions

[melvin-bot]

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

[mallenexpensify]

@kavimuru I feel like your repro steps were a test to see how quickly I could do them (and... I likely failed)
The expected behavior is that chats load once they show in LHN, right? I'm assuming we do that and this is a bug, dishing to a engineer quick for bonus 👀. I can confirm the issue is happening, @Julesssss you can watch the quick vid to see the actual behavior.

[Julesssss]

I'm assuming we do that and this is a bug, dishing to a engineer quick for bonus

The report data is received when the connection resumes (including the lastMessageText), but the reportAction data is not, which blocks us from viewing the chat. Perhaps this is a bug, but it's also possible we never implemented this logic.

report data

reportAction data

[mallenexpensify]

@Julesssss , I would think, with our goal being offline-first, that we'd want to load all report data when we can, vs waiting for an action to be taken. Do you agree?

If so.. I imagine this might be a much larger undertaking. Do you remember who's been working on offline details lately?

[Julesssss]

Yeah, though we should be careful to retrieve only a partial set of comments (like we do elsewhere with pagination). In this case, I think we should:

1. Start sending a single reportAction comment in the same onyxUpdate data. This ensures that when tapping into a chat, the bold message is shown.

2. Go further, and investigate how we might send additional comments to back-fill the report.

1 seems like a perfectly reasonable solution for now, and as you said 2 is a much larger task that will require discussion