How to Enable Real-Time Chat in a Bubble App

Instead of waiting for the database to confirm a new message, show it immediately using custom states. Create a custom state on the page called 'pending_messages' (list of texts). When the user clicks Send, immediately add the message text to pending_messages and clear the input. Display pending messages at the bottom of the message list with a subtle 'sending' indicator. When the database Create action completes, remove the text from pending_messages. The auto-updating search will then show the confirmed message from the database. This eliminates the 200-500ms perceived delay.

Instead of searching all messages for a conversation every time, limit the initial load to the most recent 50 messages using :items until #50 on your search. Store the Conversation's message_count as a field (updated on each new message) so you can show 'Load earlier messages' without a separate count query. When loading earlier messages, search with an offset. Keep the Repeating Group fixed-height with scrolling rather than growing to fit content. Use a single search data source for the RG rather than multiple searches for different message types.

Each message in the Repeating Group renders multiple elements that each reference data. Reduce data transfer by: storing the sender's display name directly on the Message record (avoiding a lookup to the User Data Type per message), pre-formatting timestamps as text on creation rather than formatting dates in the display, and using a single Text element with rich formatting rather than multiple separate elements per message bubble. Also avoid loading full user profile images in every message — store a thumbnail URL as text on the Message.

Instead of updating a database field every time a character is typed (which costs WUs), use a debounced approach. Only update the Conversation's typing_users field when the user starts typing (first character) and clear it after 3 seconds of inactivity using a scheduled custom event. Check the typing state client-side first before making database updates to avoid unnecessary writes. Display the typing indicator using a conditional on a Text element that checks if the Conversation's typing_users contains users other than the current one.

For apps with hundreds of concurrent conversations, optimize the conversation list. Cache the conversation list in a custom state and only refresh when needed (new message notification triggers a refresh). Use pagination on the conversation list showing only the 20 most recent conversations. For the active conversation, rely on Bubble's auto-updating search for real-time message delivery. Consider moving typing indicators to a lightweight external service like Firebase Realtime Database or Pusher to reduce Bubble WU consumption for this high-frequency operation.