App: [HOLD] Update App.setSidebarLoaded in SidebarLinks.js to avoid rendering bug

@kadiealexander, yep, sorry about the lack of updates here. The lib owner has put forward a proposal that looks like it should resolve this error, in which case we probably won’t need this issue. Still finalizing details there though, but I’ll keep this issue updated going forward.

@Beamanator the point is: why it comes []? It should use the existing/cached content, like if it was offline. There’s something else that causes the issue. Also, some Onyx migrations can call hideSplash as well, are they working?!

This is a good point @sidferreira, we’d be patching it more than providing a true fix.

It looks like the lib owner has been commenting in the main issue with a potential fix (or at least more insight into a potential cause).

Let’s hold off on further discussion here, if the current chats in https://github.com/Expensify/App/issues/5620 don’t lead to anything we can pick back up on this?

@Beamanator the point is: why it comes []? It should use the existing/cached content, like if it was offline. There’s something else that causes the issue. Also, some Onyx migrations can call hideSplash as well, are they working?!

The pull to refresh is a way to try to force recentReports to have results if we move the App.setSidebarLoaded to the view, but still, won’t show us why recentReports was empty at first.

@Beamanator, for context, this is a potential fix pitched by @thecodingeek for https://github.com/Expensify/App/issues/5620. We are trialling a few fixes here, and offering the full price for that issue to the user whose fix works.

@thecodingeek’s proposal:

Findings and Proposal

Hello everyone,

I tried to look into the causes for this issue. Below I am sharing my findings and a proposal for one reason.

As per Expensify.js file

if (this.getAuthToken() && this.props.initialReportDataLoaded && this.props.isSidebarLoaded) {
    this.hideSplash();
}

I think there are very less chance for not getting auth token, so it can most probably happen because either initialReportDataLoaded is false or isSidebarLoaded is false.

One very interesting thing which I could find was, if in the file SidebarLinks.js in the render function the recentReports comes out to be an empty array in the following code,

const {recentReports} = getSidebarOptions

then the Splash Screen never goes away. Reason is when recentReports is empty then there are no sections generated and <OptionsList is not rendered.

Now this <OptionsList has the following code

<OptionsList
    ....
    onLayout={App.setSidebarLoaded}
/>

This method App.setSidebarLoaded is supposed to do the following,

Onyx.set(ONYXKEYS.IS_SIDEBAR_LOADED, true);

which makes isSidebarLoaded = true.

Now as the OptionsList view did not render so onLayout of the same is never called and isSidebarLoaded never becomes true. Hence it gets stuck at the Splash Screen.

An alternative (or solution) here I think can be to put onLayout={App.setSidebarLoaded} on the parent <View> so that even if the recentReports is empty even then it will hide the Splash Screen and move further. Right now it just stuck there if the recentReports is empty.

If the recentReports is actually coming out to be empty then that can be a separate issue. But I think the above handling is good to have in the code so that it never hangs at the Splash Screen even if such thing happens.

Next, the variable initialReportDataLoaded is set to true in the file Report.js in the method fetchAllReports

Onyx.set(ONYXKEYS.INITIAL_REPORT_DATA_LOADED, true);

So this scenario can happen if this fetchAllReports API fails, but may be that is also less likely to happen. If this is the scenario then we can do error handling there and at least move user forward with a popup or something.

If you can share the user’s credentials for which this happens then I can find out the exact reason and fix even that issue as well.

@NikkiWines I would love to know what you think about this. Please check when you’re available.