Hello everyone!

I am having some isssues in a mobile app with Outsystems 11 (Outsystems UI )

When i am in homescreen and change to any other screen, the floating actions button flickers in the next screen for just a few ms but very noticeable. Since the previous screen is supposed to be destroyed I dont understand what is causing this issue.

Also, on some screens, the CSS renders in a weird way, with overrides being rendered only after the first render, which causes a bad UI experience.

Any tips on how to prevent these issues?

PS: I have a loader screen, but its supposed to be transparent (like opacity 0.5), so even using that, those issues can still be seen by the user.



Are you seeing these issues on a specific device? In the browser?

Can you share an OML that reproduces the issue?

Hello Andrew,

Those events happen on every mobile device, android and ios.

The screen renders overrides styles and sometimes it even brings css from one screen to another, which should be impossible since the screen is destroyed before rendering the new one. 


Update: After some debug i found the culprit (or at least one of the culprits). There is an undefined variable in a js action called barInterval that gets caught in the ExceptionHandler and while so, the screen doesn fully render causing that weird behaviour. Since i was not responsible for such code, it is unclear for me how to actually fix it, but is there a way to stop it from being caught by the exception Handler?

And here is the JS code:

var segDecimalCounter = $parameters.TimePercentage*0.6 ;

var barInterval = setInterval(function(){
    if(segDecimalCounter >= 0){
        segDecimalCounter = segDecimalCounter - 0.1;
        //var size =  (segDecimalCounter*100)/60;
        $actions.TimeAction();
    }else{
        segDecimalCounter=60;//$parameters.TimePercentage;
        $actions.TimerFinished();
        $actions.getDynamicKey();
    }    
}, 100);

As I said earlier, can you share an OML that reproduces the issue? 

Im sorry Andrew, that will not be possible. But like I said, the debug showed me thats the JS thats messing things up. I created an OnDestroy event on the Homescreen, with the following code:


if(typeof(barInterval != "undefined")) {
    clearInterval(barInterval);}

However the error still remains:

Update: the OnDestroy will never help with the flickering since its only called after the new screen already rendered, thus the issues will always remain. I will have to fix the JS code error to prevent this situation, its the only way. 

For the moment i have added an exception on the GlobalHandler so the flickering is less perceptible...small improvements better than none.

New Update: Removinf the OnDestroy event seems to help a bit, it wasnt doing anything there, only 1 more action the flow had to go threw after rendering the new screen.

So now the problem is, as far as I could tell from the debugs, the lack of optimization of the actions like OnAfterFetch and so on. The screen rarely use any OnRender or OnReady action etc...Since there is no time to go threw the whole code does aynone have any tips on either improving performance or preventing the css render while fetching data or performing actions?


Hi JT,

It is not easy for others to help you, your problem is specific, and the information you share is limited for someone to give you an answer that will fix it.

Could I suggest another approach:

  • Create a new mobile application, with the minimum logic where we can on a homescreen change to another screen, and where the floating actions button flickers in the next screen for just a few ms.
  • If you are able to replicate your problem in a isolated mobile app, than you can share it and others will more likely be able a) to understand your problem, and b) maybe find a solution.

Key for someone to solve a problem is that there is the problem is repeatable with minimum "other" logic.

Regards,

Daniel

Hello Daniel, 

Yes i totally understand that, however in this case i could have hardly been any more specific withou sharing an OML or wasting time creating one without any sensible IP on it just to remain unanswered as well. 

Also, as per my last response I am just loking now on some tips to improve on how the logic works in mobile or just some way to hide the CSS render while the page loads, in a general way. And I would, very much, apretiate that.

Hi JT,

I agree your problem description is clear, but if I quickly build a mobile app with the same navigation options as you describe I do not get the problems you have. 

So in order to be able to solve a problem it is critical for the problem to be repeatable.

My initial thoughts are that the logic you have implemented iare causing a performance problems, thus having an impact on the rendering of the screens (the flickering). Do you experience this problem on high-end as well as on mid-range, low-range mobile devices?

For mobile as you known performance is more tricky, from a developer perspective to keep everything performant given that mobile devices have less power than computers for web applications.

You probably already check all the best practices for mobile as described in the following document:

https://success.outsystems.com/Documentation/Best_Practices/OutSystems_Mobile_Best_Practices

Screens with large lists tend to cause problems also, so try to avoid unnessecary large lists on screens or for that matter images that are not optimized for mobile devices.

I don't know what else to advice which you probably do not know already.

Regards,

Daniel


Hi JT,

- Are you doing some heavy actions in OnInitalize of Next Screen? If Possible do share a snapshot of the respective action on that Second Screen.

- Again, Did you override some widget CSS? Probably with ! important  in Local-CSS of that Seconds Screen

- Are you running/using any timer's/handlers in the first screen

- Any Custom JS :)

- At least you an share a video of your mobile app so that folks here can guess the issue in the right direction.








Sorry for the delay, i have been flying for the past days...

Yes Assif, there is a lot of heavy stuff going on here, overrides? yes, in-lines? yes, custom js? oh yes, its everywhere, its like their go to choice for everything. But the worse right now is the logic flow, which is actually not my dpt, I am just doing all the front end stuff - which is already quite a lot.

The thing is, i did such a good job :) (check my firts comments) that now i cannot film the glicthes happening bc they are very rare now. Before it happened all the time and i could even see it happening during a debug, but now its mostly gone. I could still send you a private link to a debug video if you want to take a look at it.

But everything weird as been happening with this app, one of the most amazing is the backdrop-filter actually working on Android phones for the first 10min or so after a new app install, I mean for 1: Android isnt suppose to have backdrop filter support and 2, its even weirder to stop doing the blur after a few minutes...And this is just some of things i deal with everyday, I miss web dev sooooo much!!