How to improve menu loading?

Need help
1

My app has a menu with menu elements that are security restricted. It will look up a security table and find out whether the user’s roles match with the roles allowed for this page. As a result, the menu items load time is slow and the UI is very clunky.

Here is a gif:

My-Page

Is there any way to improve this?

2

I have made a tutorial on how to make your animations more smooth with Bubble natively.

Cant remember where the post is but I still got the video handy.

3

Thanks. I don’t really need any animation. I would like the the list to appear all at once. The problem is Bubble takes time to find the security in the database. I would it to find the security first while the menu details are still hidden, so that by the time the user clicks on the menu item, they will all appear immediately.

4

Ohh I’m sorry. Add a loading state somewhere, and only show/allow things to be seen after that state is loaded. Have you tried that? Something like a skeleton loader.

5

Can you expand? What do you mean by a loading state?

6

I’m assuming that’s a Repeating Group? It’s only happening when the repeating group is first visible right?

Here are some things you can try

  • You can try “show all items immediately”. If that doesn’t work
  • If you are using a search as a data source then do this instead: load the search into a state list first (on page load for example), set the repeating group’s data source to that state. So the data for the RG is already loaded in the page by the time a user opens the RG.
  • Not really something I recommend, but you can keep the RG “visible on page load” and use other methods to hide the RG (height = 1). This ensures that the RG is loaded even if it has a search as a data source

Try each and see which one works for you then do the same for the rest. The delay is from the RG having to load data and not rendering since it’s just text.

7

Hi, no it’s not a repeating group. These are menu items (clickable text / buttons), each with a condition to appear only if the user’s roles match with the roles associated to a security setting.

Could I do this if it’s not an RG? I would have to have elements of 0 px looking for the security settings on page load for each menu item then?

8

Yep you can. If you want to improve your UX, one way is to load data before the user needs it.

9

Yeah OK it works,

I did a couple of 0 px groups with yes/no data and by the time you click the menu the conditions are loaded so it just shows straight up.

Thanks

1 Like
10

This topic was automatically closed after 70 days. New replies are no longer allowed.