flyerhq / flutter_chat_ui

Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
https://flyer.chat
Apache License 2.0
1.59k stars 687 forks source link

Bubble re-rendering when update message id #511

Open GilAlvez opened 11 months ago

GilAlvez commented 11 months ago

Hello 👋,

I've been using Flyer Chat in my application and it's been great. However, I encountered an issue that affects the user experience in a specific scenario. When I update the ID of a message after it has been created and confirmed by the server (this is currently strictly necessary), the corresponding message bubble is re-rendered, accompanied by an animation. This creates a distracting effect and is particularly problematic when media messages are involved.

I looked through the documentation but couldn't find any way to disable or modify this presence animation. I also checked previous questions to see if this concern had already been raised, but didn't find anything.

Is there a built-in option to disable this animation, or is it hard-coded in the AnimatedList used to render the chat? I'm considering contributing if there is no workaround due to its importance, but I wanted to confirm a simple way to resolve this first.

Here is an example video that illustrates the problem: Android Emulator - Pixel_7_A11_5554 2023-10-17 09-40-18

demchenkoalex commented 10 months ago

Hey @GilAlvez

Yes, this is the animated list problem. I am currently working on a v2 complete re-design of the library to make it more performant and customisable, and I already know this issue won't be happening there.

I would like to focus on that new version cause it will be better in any possible way, so I would very much appreciate if you could find a temporary solution, like a fork or something.

Thanks!

himsa commented 7 months ago

@GilAlvez did you find the solution ?

juanpabloCamus commented 6 months ago

@GilAlvez Hi friend, did you find any solution for this?

demchenkoalex commented 6 months ago

hey guys, messages will be rebuild with any updates, that is the nature of animated list. On v2 branch I am also struggling with this and can't solve this for a month now probably, after talking to 3 great flutter engineers I know. For me it looks like animated list in flutter is kinda badly designed.

This is an example from v2 branch with message IDs being updated from backend. I think I came pretty close, just figuring out one last issue before publishing v2.

https://github.com/flyerhq/flutter_chat_ui/assets/14123304/0972ba5f-56f9-4241-b9bf-d6841b623737

opensourcekam commented 2 months ago

I am having this same issue now on the latest build 1.6.14 -- Has this been solved and maybe re-introduced? @demchenkoalex @GilAlvez

demchenkoalex commented 2 months ago

hey @opensourcekam it wasn't solved, and I think it is unsolvable. I will just do a better caching for v2. Message id is used as a primary key for the widget and as soon as it updates, flutter will rebuild the whole thing (I use animated lists, maybe it is better with not animated one, but I don't want to remove animations for this - I will just improve rebuild time)

opensourcekam commented 2 months ago

@demchenkoalex Got it hopefully v2 can address this. I was able to create a better user experience by caching data retrieved by my future and subsequently reading cache instead of making a network call each time. This pattern although it doesn't solve the underlying problem, it does indeed fix the visible re-renders.