ISSUE: invisible element shows up event with undefined custom state

It’s gotta bi simple, but it is not working :frowning:

My page contains two invisible (by default) elements. Each has opposite conditions to become visible when custom state “visibility” is yes or no. By default, custom state is empty!

I also have a button, which triggers a workflow of three steps:

Step 1. Set custom state “visibility” to “yes” ONLY WHEN search for database records unique id’s contains Current Page unique id (which works fine).

Step 2. Set another custom state “record-id” to the Current Page unique id.

Step 3. Set custom state “visibility” to “no” ONLY WHEN “record-id” is empty.

PROBLEM! Both invisible element are supposed to be invisible on page load. However, the invisible element which is triggered by visibility “no” state shows up - even with the custom state “visibility” being totally empty (which I can see in debugger).

Is this a bug, or Boolean (yes/no) sates are actually pre-set to no despite the fact they are empty?

P.S. The rest of the flow (matching the records and hiding/displaying the blocks works fine. My issue is with the invisible block which appears by default. Why is this important? Because I use custom states to pre-validate and pre-populate data to show page elements. Some elements appear before the data is pre-validates, which cause flickering of UI. At first I thought this was because my app was slow, but now I realise this is due to the above issue.

Yep, boolean states are by default “no” if they’re not a yes.
Learned this the hard way too.

Hence we’re usually using text fields for states of the same nature. If it’s blank - it’s blank :slight_smile:

3 Likes

Are you serious? It took me at least 3 hours to try this and that… I think Bubble needs to do something about it, like remove the “default” field, which can be left out empty (and cause confusion too). But thanks for replying so swiftly with an actual answer.

1 Like

I just did the re-check, and things are now working as expected (gosh!) However, I am still getting flickering of some elements… as if it takes a split second before conditions are checked, and then elements are hidden. Event though they are hidden by default. Is this a know performance issue or do I need to use proper show/hide logic?

Probably the app is confused by which conditions should go first , but can’t say for sure. One needs to check the conditions and the setting for those elements to tell you with more precision.

Meaning, that the app should not get mixed signals - visible, invisible, visible, invisible from multiple sources (conditions, settings) at the same time, If you know what I mean :slight_smile:

So if you see the flickering - shoot the screenshot of config or the element that flickers - we’ll try to figure this out :wink:

Hope this helps :+1:

1 Like

Hi @vladlarin. I’d like to get back to the “flickering” issue if you don’t mind. Please see the gifs below. There are two cases:

  1. Two groups that are both invisible by default. The onPageLoad flow checks if content is ok (I am using text, not boolean based yes/no), and them shows either 1 or another. As I can understand, before the flow actually discovers content, it thinks there is none, and shows wrong group for a split second.

  2. In the second case, I am updating an image and a repeating group. The latter updates slower, so it looks like there is a glitch.

If I understand correctly, there is nothing I am doing wrong. I believe it’s just Bubble being slow doing some operations, and sometimes doing them not in the exact flow order. I am fine with either, but I am concerned about the user experience. Perhaps you could suggest work-around?

Many thanks in advance!

P.S. Sorry, the gifs didn’t work really well, so I uploaded a youtube video. Please see here: https://youtu.be/eEcIPPFhCL0

Overall - you should try and tinker more with this :slight_smile:

I’ll give you a couple of hints just to show you how the thought process should typically go to resolve these kind of cases :slight_smile:

For #1: Maybe you can try to add another condition to the “Wrong Group” to make sure it’s visible only if there is no content AND your setState value is set to something (i.e. not blank).

This way you can make sure this group shows only if you REALLY have nothing to display in the repeating group, not when your page is loading and you don’t YET have anything to display.

For #2: It looks like you’re doing a lookup (Do a Search or the like of it) to display the next step\content in your repeating group. The way to speed this up depends on how you set up your Database model and what you can do to improve the lookup speed, as well as the size of the object you are loading into your current Repeating Group Cell.

It’s hard to advise just by looking at it on the video, but I’d try to simplify\speed up the query and the display as much as it’s possible to improve the UX here.

A great reference about query speed and data structure overall has been put together by great folks at Airdev. Here it is:

https://docs.airdev.co/canvas/using-bubble/bubble-best-practices/speed

Sorry for not being able to solve this for you just like that, but it’s actually a good thing for anyone to explore and learn it the hard way to make sure it really sticks.

Good luck!

1 Like

Thanks a lot Vlad. Happy to report that I am thinking in the same direction. Actually, for N1,I came up with the same solution. As for N2, I narrowed the lookup as much as I could, but setting restrictions where to look. Also, I believe my app is fairly simple. I also read the Airdev recommendations and I try adhere to them as much as possible. Gotta think more about it.

1 Like