TW-1650: part II: memory footprint in web: remove unnecessary animation and Image.memory in web

[sherlockvn]

DESC:

#1650

Problem:

• Currently, we use Image.memory to load image data to view, which required two steps, its need to downloaded to memory first, then pass it to the widget, which make app freezes a lot while scrolling.

• Moreover, MxcImage use combination of animation and setState when image is downloaded, which is not efficient.
  -Image.network have multiple optimization, and build-in method (loadingBuilder and frameBuilder) which make the rendering in web more efficient. And We don't have to convert to bytes anymore, use the download link, and the browser will help us caching the image.

• For the case of encrypted chat, we still have to use Image.memory because of we have to decrypte bytes data after downloading done

• For the case of Avatar, use cacheWidth to reduce the memory usage when decoding image

Reference:

Reference of frameBuilder in Image.network

Compare performance and memory usage between beta.twake.app and current

Screen.Recording.2024-05-06.at.15.18.51.mov

Demo:

Screen.Recording.2024-05-08.at.12.51.37.mov

Screen.Recording.2024-05-08.at.12.46.10.mov

RPReplay_Final1715168002.MP4

[github-actions]

This PR has been deployed to https://linagora.github.io/twake-on-matrix/1741

[sherlockvn]

• Hot fix: timestamp is not updated when scroll in chat
  -> move InViewState dispose() in chat controller, because its like a static instance, so we can't dispose it in the message dispose() method

Screen.Recording.2024-05-13.at.17.14.04.mov