Investigate keeping a loaded webview offscreen to reduce messagelist load times

[WesleyAC]

From my investigation in #4806, we know that the floor for how fast we can load a MessageList with our current approach is 250ms, which is unacceptably high. In order to go below this, we need to load the WebView before we need to show a MessageList. We should investigate how much work doing so would be.

There are a few libraries that allow displaying components at a different place in the hierarchy than they're loaded:

• rn-native-portals (unmaintained)
• react-native-paper Portal
• react-native-portal

These all have pretty similar APIs, and of them, react-native-portal seems the most promising.

I think the general approach to this is like this:

• Make a HotWebViewProvider component, which has a bunch of WebViews as children, but doesn't display them.
  • It should always have one more WebView than we're currently using
  • It'll provide some API to get the ID of the unused WebView. When that API is called, it'll make a new WebView to give out next time.
    • We also need to think about how to thread the message sending code through, since the MessageList will no longer have the WebView as a child, perhaps forwardRef will be of use here?
  • These webviews will load all of the js.js code, but not have any content in them.
• Modify MessageList to use a Portal that shows the WebView for the given ID

I'm sure there will be lots of difficulties to work out when actually doing this, but this is just the general plan of attack.

[WesleyAC]

Some discussion on CZO