How to Implement Optimistic UI Updates for Instant Chat Message Display?

Database & APIs

Is there a way to store all chat messages for a two way chat locally to reduce the lag between when the user hits the send button and when the chat message bubble displays on the UI? Specifically, I'm experiencing a delay of 1000-2000 milliseconds (sometimes longer depending on phone signal).

I’ve read about optimistic UI updates, where you show the chat message in the UI before it's actually written to the database, but I’m not sure how to do this properly.

Right now, my chat list view directly queries Firebase for messages. However, a better approach would be to link the list view to a local page state that stores a list of preloaded chat messages. When the user sends a message, it would do two things at once: write to the database and add the new message to the local list in the page state. This way, the message appears instantly in the UI without waiting for the database to update.

Any suggestions on how to best handle this and smooth out the user experience would be greatly appreciated. Thanks!

What have you tried so far?

I’ve tried two approaches:

  1. On page load, store a list of chat message documents in a page state datatype variable, but I haven’t been to successfully store a list of firestore documents to a page state. Is this possible?

  2. I also tried using a conditional builder where the most recent message is temporarily stored in the page state and then replaced by the version written to the database. This, however, causes a jolt in the UI when the temporary message is swapped out for the database-stored version.

Did you check FlutterFlow's Documentation for this topic?
Yes
3
6 replies