Prioritise and reduce the amount of events decrypted on application startup

[germain-gg]

Related to element-hq/element-web#13266
To review alongside matrix-org/matrix-react-sdk#5980

When loading element, it will either read from cache the entire /sync blob that has been persisted or will query that information from Synapse.
The idea is to implement a priority queue that will cap the maximum of events that will be decrypted on application startup. Everything else will be lazily decrypted when a user views a room

At the moment, from clicking on a tile to having all messages displayed on screen it takes roughly a second. With lazy decryption it will approximately take 2 seconds but the most recent messages will start to appear on screen from the first second.

Critical events

This pull request brings the concept of critical events. These are the events that a client requires to have decrypted to ensure it can run and provide all the required features to the user

At the moment a critical event is an event that falls under the following category

• Last event of a room (to ensure previews are working)
• All events that occured after the read marker (to ensure correct-ness in notification count)

Let me know if you can think about anything else that would benefit from being decrypted ahead of time

In addition to that, I am using breadcrumb rooms to detect which rooms a user might be likely to interact with again in the future and proactively decrypt the live timeline.
This could be scrapped if we wanted to further improve app start performance at the cost of a few layout shift as highlighted in this video

Benchmark

# of e2ee rooms	load time (before)	load time (after)	% difference
250	4mn50	31s	89%
43	37s	12s	67%

These recordings are taken on an existing session by looking at the time between a hard refresh until the console stops spamming "decrypted events" messages by the thousands.

Please share with me your recording and I will add them to the table above, the code is up and running on a netlify preview
If you want to know the number of encrypted rooms in your account you can run the following snippet in your terminal

Object.values(mxMatrixClientPeg.get().store.rooms).filter(room => {
  return room._client.isRoomEncrypted(room.roomId)
}).length;

[dbkr]

in general this looks like a good approach I think

[jryans]

Overall, this is looking reasonable so far. Do you have any data on how much performance improves with this change in isolation?

[germain-gg]

Do you have any data on how much performance improves with this change in isolation?

I have just done a benchmark using the same account. It takes down the load time from 4 minutes 50 seconds down to 30 seconds. During which the application is still usable, but with a degraded experience (sometimes the room spinner is missing, ...)

And below is a screen recording of the experience when we load a room where we need to lazily decrypt events

lazyloadevents.mov

[jryans]

Looking good overall to me! 😄

[jryans]

Ah yeah, as mentioned before, it would be good to have some kind of automated to verify rooms still decrypt as expected, either here or in the React layer (whichever makes more sense).

[turt2live]

ftr, this seems to give about a 15x improvement for decrypting the important rooms on my account. Clicking on a room and having it pop in at that second is amazing 😍

I have profiles I can share privately of before and after if people are interested (though you need a ton of CPU to load them).

[turt2live]

Overall looks fine. Like the react-sdk, I mostly have lint concerns. The flow seems to be valid though. Thank you!

[turt2live]

thanks :)