Mattermost-server: App slows down when opening a channel with large number of animated emoji

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

---

Notes: Jira ticket

Android app gets slowed down when in a channel with a large number of animated emoji. App resumes working normally after switching to a different channel.
This only effects the Android app, iOS works as usual in this scenario.

Original community report: [https://github.com/mattermost/mattermost-mobile/issues/2828|https://github.com/mattermost/mattermost-mobile/issues/2828]

Apparently when rendering multiple images on Android it can consume a lot of memory and CPU cycles until the app becomes fully unresponsive, this can be related to the underlying fresco library used on Android to render images.

Possible solutions:

• Tweak the fresco library configuration (more info can be found [in this blog post|https://medium.com/in-the-hudl/configure-fresco-in-react-native-28c2bc7dcc4d])
• Replace fresco with [React Native FastImage|https://github.com/DylanVann/react-native-fast-image]

[kdenz]

Can I help on this? Thanks

[kdenz]

So I've successfully replicated this issue using my favorite :parrot: lol

Now gonna try to optimize it

[kdenz]

@enahum @esethna
Hi guys, I think I've found the solution, which is to replace use of fresco with react-native-fast-image

Tried but doesn’t work

• Use RN 0.60 and update fresco from 1.10.0 to 2.0.0
• Reduce the same gif size from 12kb to 2kb

What I've tried that works is on the rn-0.60 branch, use react-native-fast-image 7.0.2 (requires rn 0.60) to replace the <Image/> component in emoji.js

• And you can see below both UI and JS thread are at 50+ FPS.
• gifs rendering are much faster now! It used to be super slow with Fresco
• To further improve the gif loading speed, I would suggest backend to optimize all custom emoji gifs to make sure it's as slim as possible in file size (We don't need it to be huge anyways)

[enahum]

@kdenz was this on top of the rn-60 branch? feel free to submit a PR ;)

then we can focus on the server to optimize the images in general including gifs

[enahum]

This issue has been resolved