First post here — I’ve been stuck on a critical issue for three weeks. I’ve contacted Bubble support multiple times and went back and forth with their team, but they weren’t able to provide a solution, so I’m turning to the community.
I’m building a native mobile messaging feature on Bubble and I’m experiencing a very bad UX issue: every time a user sends a message, the entire Vertical List flickers, reloads and jumps visibly. The new message appears but the experience feels completely broken — nothing like WhatsApp or iMessage.
Has anyone successfully built a smooth messaging page on Bubble native mobile? And if so, how did you handle the Vertical List reloading every time a new message is created in the database?
I’ve already tried:
Adding max height to all nested groups
Simplifying to a single data source
Removing unnecessary visual conditionals
Nothing has fixed the full reload on new message.
Any feedback, workaround or alternative approach would be hugely appreciated. Thank you!"
A video would be very helpful. Please also the view of what is happening on your app, show your editor and the conditions, as well as any workflows that it uses. Thanks!
Let’s start with optimizing your workflow a bit, it looks like you should have two workflows but have a condition at the TOP of the workflow to check which workflow should run. I would start there since the workflow being very long might be a culprit but it definitely doesn’t hurt to fix this issue even if it doesn’t solve the problem. Try that and let me know how it goes.
The condition i am talking about is the one about if the group is empty or not.
Hey @Alexandre1605, there is a workaround for this. I worked on a similar issue for a client. This is what I did to make it auto-scroll…no jump/ no flicker:
Make sure your root screen or view is set to view type Scrollable.
On your short list element, go to the Layout tab and make sure that Fit Height to Content is checked. Add a bottom margin to it that will be around the height of a floating group for the input box and send button.
Make sure that your input box and send button are wrapped inside a floating group.Click on the floating group. Go to the Layout tab.Set vertically float relative to bottom.
You’re going to have to create an invisible anchor. This is the workaround. Add a standard group to the page and drop it under your short list element. Name it something like “Group Bottom Anchor”. Go to the Layout tab and set the height to 1 px. Go to the Appearance tab and set the background style to None.
Now you’re going to have to give your view or page a custom state messages count. Add a custom state to the root view. Name it something like “Message_Count”, the type to number, and the default value to 0.
Go to your workflow tabs. Add a Do When Condition is True . Change the Run This to “Every time”. Set the Only when to do a Search for Messages: count > [root view’s] messages count. Then add these workflow steps: (1)Add a pause before next action: Set it to 300 ms (2) Scroll to: Select your Group Bottom Anchor element (3) Set State: Root View’s Message_Count value to Search for Messages: Count
Add the above flows to your action button when a new message is sent.
This should work and get rid of the issues you are facing.
Thank you both for your help! I wanted to share my progress and ask a follow-up question.
Here’s what I’ve identified and fixed so far:
The visibility conditions of the Sender/Recipient groups were a major cause of flickering. I replaced the “is visible” conditions with opacity conditions (0 or 100), which significantly reduced the flickering.
I split the message sending workflow into two workflows with conditions: one for existing conversation groups and another for non-existent groups.
I switched from a vertical list to a short list with the following data source: Search for messages sorted by creation date (descending order) → :items up to #50 → :sorted by creation date (ascending order). This works well.
For the auto-scroll, I did NOT use a “Do When Every time” with a Search for Messages count, as this would have consumed a lot of Workflow Units. Instead, I added the scroll directly to the send button workflow: 300ms pause → Scroll to Group Bottom Anchor.
Persistent problem: Despite all these fixes, when sending a new message, ALL items in the favorites list visibly reload—messages and especially profile pictures flicker/reload. The result is still not smooth.
As you can see in the attached video, each cell reloads when a new message is created.
My question: How do you handle the profile picture in each message cell? Do you load it differently to prevent it from reloading every time? Is there a specific technique to prevent the cell and favorites list from fully reloading when adding a new message? My feature isn’t smooth and seems to be causing the app to bug or lag. Do you know how to fix this?
RE:
For the auto-scroll, I did NOT use a “Do When Every time” with a Search for Messages count, as this would have consumed a lot of Workflow Units. Instead, I added the scroll directly to the send button workflow: 300ms pause → Scroll to Group Bottom Anchor.
**This is fine for the sender, but for the receiver the “Do When Every time” may be needed for the receiver’s side to auto-scroll.
RE:
My question: How do you handle the profile picture in each message cell? Do you load it differently to prevent it from reloading every time? Is there a specific technique to prevent the cell and favorites list from fully reloading when adding a new message? My feature isn’t smooth and seems to be causing the app to bug or lag. Do you know how to fix this?**
**It seems that there is some improvement from the first video. The auto-scroll doesn’t seem to be as jumpy as before. Regarding the lag time on the profile image loads, this might be an issue with Test Flight/Bubble Go not caching the images/data. My best guess is that this may be resolved once you actually deploy it on the app stores.
