fix: ReportScreen is blank, indefinitely loading on web/desktop

[kidroca]

<If necessary, assign reviewers that know the area or changes well. Feel free to tag any additional reviewers you see fit.>
@marcaaron

Details

Addresses the regresion found for #2221
The details and the steps are the same as in that PR

Fixed Issues

Fixes #2327

Tests

On web/desktop

1. Be logged out
2. Log in
3. Soon after loading should stop and you should see the chat view
4. There should not be a loader, loading indefinitely

Also please cover the steps in #2221

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

[marcaaron]

LGTM

[kidroca]

Updated
I'm done pushing more stuff, unless you see something that needs changing here

[shawnborton]

Hmm so wait, why even have a loader at all?

[kidroca]

The issue was with the old chat being briefly visible and then a lot of heavy rendering would make the chat appear in chunks

2021-03-29.12-45-06.mp4

The idea was to end up with something like this, but it can't be all addressed in a single PR as it's complex

loader.mp4

We have come this far (this is a dev build on simulator so it's not the smoothest example, and the keyboard popping out doesn't help):

Screen.Recording.2021-04-08.at.22.19.36.mov

• ✔️ the old chat no longer appears initially
• ⚠️ the transition can be improved
• ❌ chat items rendering can be improved

[shawnborton]

Got it. Yeah, I think fading in/out might help. Then this way if the transition is able to happen fast enough (like the internet connection is fast) then maybe we don't even get a chance to see the loader.

[jboniface]

Any chance that the update this PR is addressing led to the choppy behavior we're seeing on iOS in this video?

Image.from.iOS.MP4

cc @joaniew

[kidroca]

@jboniface

Any chance that the update this PR is addressing led to the choppy behavior we're seeing on iOS in this video?

It doesn't seem the video includes the changes from this PR as it would display a spinner, fading out, for at least a split second

Here's a before/after comparison

Right before my changes were merged - 09e4a86

iOS.Before.mp4

With my changes merged - db7b937

iOS.After.mp4

---

Some of my prototypes included Layout Animation. But we agreed they would have to be applied incrementally to keep the changes under the PR small. This is something I was experimenting 2-3 days ago and hadn't had merged any updates from master - you can notice there's no bump that seems to have crept some time in between...

With.Layout.Animations.mp4

[kidroca]

@marcaaron
I had an alternative loading handling, it makes the component a bit more complex, but will hide the loading as soons as there is data from Onyx, which would be instantly for web/desktop. You can take a look here:
kidroca@ae376b4

[kidroca]

This indefinitely loading issue should be fixed by #2346 . unless we want to apply some small changes to the full screen loader - color, opacity, remove it, we can close this PR.

If this will be kept open I'd like to reset it to master and just apply the loader changes

[marcaaron]

@kidroca I think based on this conversation here we are expecting to see some color updates with just a softer background.

[marcaaron]

Which is pretty much what we've got and just need to fix conflicts and remove the unneeded code fixed in the other PR (now merged).

[kidroca]

Updated.
The PR now contains only a bg color change to the fullscreen loader

[OSBotify]

🚀 [Deployed](https://github.com/Expensify/Expensify.cash
/actions/runs/765130740) 🚀 to
staging on Mon Apr 19 2021 at 22:41:56 GMT+0000 (Coordinated Universal Time)

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅