[Performance] `localforage.setItem()` is causing blocking behavior on init for web clients
Problem
When the app inits and many keys need to be set things get really slow on web. It currently takes me about 10-12 seconds to switch to a new chat when the app inits.
We've narrowed down the source of the problem to:
- Not stringifying IndexedDB values. For whatever reason IDB takes a while to store structured JSON.
- Calling
setItem()too many times in a row
Addressing either one should work. Both seem to be causing similar rates of pain.
Solution
- Start stringifying values - complicated because some of the JSON is not serializable i.e. stuff with attachments.
- Defer the writing to IndexedDB until we are idle or just slow it down or something at least. We are using a memory cache already so I can't think of a reason why our writes must happen immediately on page load.
More ideas here: https://rxdb.info/slow-indexeddb.html, but the general suggestion is to use fewer transactions. That is not possible with localforage so we might want to look elsewhere - maybe the plugin mentioned here can help https://github.com/localForage/localForage/issues/315
I did a test here where I just made all the writes synchronous (probably not the solution we want), but it improves things immensely
https://github.com/Expensify/react-native-onyx/pull/118