BottomMenu Flickering

  

Hi

I'm making a mobile app that has a setting for users to select bottom bar items.

I'm using css to change the icon to the user selected one.



User selections are stored in devices local storage and then assigned into variables at the aggregates "On After Fetch" -action. 



The problem is that the icons flicker when screen changes or refreshes.


(because of the gifs framerate not all flickering shows)

I have tried initializing variables in screens "On Initialize" and "On Ready"-actions and also using data directly from the aggregate without variables. I have also tested this in native app.

Only solution that I have found is to use screen transition like "Slide from Right" with data that comes directly from the aggregate. When i counter the transition animation with css there is still some flickering. 

Is there a better way to change bottom bar icons from variables?

- Jacob

Hi Jacob,

What kind of properties are you changing in the css? Or better yet, could you share a sample oml?

Cheers,

José

Hi José,

the value that is added or changed to the icons css is the fa- value. For example to get Home-icon I add fa-home to the css.

- Jacob

Jacob K wrote:

Hi José,

the value that is added or changed to the icons css is the fa- value. For example to get Home-icon I add fa-home to the css.

- Jacob


and I understand that the cause of the problem is the time that it takes to get the user input stored in the variable.

Hi Jacob,

Maybe the attached oml is too simple, but I'm not getting any flickering in my example. Can you share an example of yours?

Cheers,

José

Solution

Hi Jacob,

You should set stuff related with CSS in the oninitialize of the Screen. Not in the Block.

The reason for that is that the rendering of the Screen will not wait for the oninitialize of the Block, and thus it will render the Block empty. When the oninitialize of the Block finishes it will then be rendered. That is (most likely) the reason for the flickering: It starts empty and then it renders the Block with your icons.

The solution for that is to do that kind of configuration in the OnInitialize of the Screen and send the icons to the BottomBar Block as input parameters of it.

Cheers,

José

Solution

José Costa wrote:

Hi Jacob,

You should set stuff related with CSS in the oninitialize of the Screen. Not in the Block.

The reason for that is that the rendering of the Screen will not wait for the oninitialize of the Block, and thus it will render the Block empty. When the oninitialize of the Block finishes it will then be rendered. That is (most likely) the reason for the flickering: It starts empty and then it renders the Block with your icons.

The solution for that is to do that kind of configuration in the OnInitialize of the Screen and send the icons to the BottomBar Block as input parameters of it.

Cheers,

José

I'll try that next and share the oml if it doesn't work. Thank you for your time.

- J 


Thanks José, seems to be working, although I have to initialize them in all the screens now.

Hi Jacob,

You're right and I don't think there is another way around that.

Glad that you have it working.

Cheers,

José