Lag in Panel Transitions on Android using PhoneGap

[lilmofo812]

Just curious if anyone else notices a lag in panel transitions within an app running in PhoneGap when running on Android (feedback for iOS as well but as far as I can tell I've never seen any lag here).

Specifically I have lists that sit in their own panels within a panel navigator that as a button tab at the bottom to move between the home screen of the app and each list in a panel. When a button in the button tab is tapped I put a wait gif on the screen and then transition to that panel using the simple Javascript code below as well as run a refresh on the list.

 {dialog.object}.panelSetActive('PANEL_NAME',true);

About half way through the transition the screen pauses for about .5 second to a second (on Google Pixel 2 running the most updated version of Stock Android, however for other devices it is usually longer especially older devices or devices that don't run stock android).

Do others experience this lag as well and if so have you found a way to combat it? I get complaints that my app doesn't work (due to this lag and the lag occurred when trying to tap buttons or when trying to type into fields) and just wondering what others experiences are with this and if there is something I can do.

I do want to add in a couple caveats as I know they may be playing a role (though they don't seem to be affecting iOS devices).

1) The main component of this mobile app is fairly robust in the fact that it has 5 list controls with detail views as well as another 9 lists that either open up their own UX or are just for information (ie some cached lists of things like truck numbers, trailer numbers, etc that can be refreshed if they need to check for new data but these are selection lists for them to use and add records to when need be). The overall size of the main component is 12.7 MB which in mobile app standards isn't massive but based on the size of most other components in my project is about 6 times as large as the next largest.

2) I am using PhoneGap build cli-7.0.1 as I have run into issues uploading to phone gap, iTunes connect, or with functionality of my app when trying to use cli-7.1.0 or cli-8.0.0, so if you are using these and aren't seeing the lag would be good to know (though I have tested both versions even when app functionally was broken and the transition delay was still there).

My main thing here is that I have tested this app running iOS 9 on an iPhone 5 and the lag doesn't exist which leads me to believe this has something to do with how Android handles phone gap apps (whether that be the way they handle the web view or if it has to do with the javascript code that calling the wait message and then transitioning).

[jgrannis]

Re: Lag in Panel Transitions on Android using PhoneGap

I definitely see/have seen "lag" problems in my apps.

The first thing I would do is definitely turn off the animation during the panel transition. The user should no longer see that screen pause during the panel switch.

Definitely make sure all lists use Dynamic type of virtualization (it makes a HUGE difference).

I have quite of few lists that I only use as the source for lookups for other lists. For these, I set the virtualization Size = 1. Why render a longer list if the user will not see the lookup list? The list data is available anyway in the background. Maybe reduce the lists' layouts to very few columns. No need to keep multiplying the creation all those DIVs within DIVs within DIVs... Can you get away with creating some freeform layouts for the lists with a more simple template?

In my case, eventually, I should to get away from creating all the lookup lists and use functions instead of source lists for my lookups.

The following MAY help...
https://developers.google.com/web/to.../timeline-tool
You will surely see the lag when the FPS fall well below 60 FPS.

[lilmofo812]

Re: Lag in Panel Transitions on Android using PhoneGap

Thanks for the quick feedback Jeff!

I use all freeform lists and have them filtered based on a date parameter that should keep them from loading more than 20 records at once (most of the time the lists will have 5 or less records since they are constantly refreshed when the list is moved into view, a necessity because of the tech savviness of the user base).

I really like the animation as it shows the app is doing something and I think it's become pretty common for apps to have transitions like that (picked 5 random apps off my iPhone X and 4 of them did some sort of screen transition). I'm more curious what is actually causing the lag since it doesn't seem to exist on iOS (even on older devices specifically an iPhone 5 running iOS 9). Wonder if this is an issue with the underling web view used on Android for PhoneGap apps and if it just doesn't have the chops like the one on iOS (which I am pretty sure uses the exact same code as Safari, not sure if on Android it uses chrome or the built in Android browser).

Look forward to hearing what others have seen on their devices as well. Hopefully with some good discussion we can come up with a solution to this issue to get app response and feedback on Android to match that of iOS.

[lilmofo812]

Re: Lag in Panel Transitions on Android using PhoneGap

Just wanted to add in, I was not expecting to see lag on the chrome browser on my computer (I don't use chrome on my MacBook so never really thought to check this out), but sure enough even on my computer the lag exists and it says the largest amount of time is being spent scripting, does this mean that the chrome browser is just struggling with the Javascript? Below is the code I have on the button's tap event (using tap events as I seem to get a little better feedback using this rather than the abstract on click with android but let me know if you are experiencing the opposite). Simply put I get a pointer to the list and and reset the detail view to make sure there isn't a currently edited record (which would be lost on a normal refresh but was causing problems on an incremental refresh), then do the transition of the panel and as it is transitioning I put up a wait gif and refresh the list (wait message disappears 2 seconds after the list's onListReady event fires). Doesn't seem like this code should take that much to execute but any feedback is greatly appreciated!

var lObj = {dialog.object}.getControl('LIST1');
lObj.resetForm({prompt: false});
{dialog.object}.panelSetActive('PANELCARD_1',true);


var wo = {};
wo.icon = 'Images/wait_dots_red.gif';
{dialog.object}.showWaitMessage('page',wo);
{dialog.object}.refreshListData('LIST1',{mode: "incremental"});

[jgrannis]

Re: Lag in Panel Transitions on Android using PhoneGap

I have noticed also that I prefer using tap instead of click.
...just to quickly confirm that point.

You could always "play around" with the setTimeout method. Put the refreshListData there so that it places that action to the end of the event queue and maybe by then, the panel transition has finished.

For instance,

var lObj = {dialog.object}.getControl('LIST1');
lObj.resetForm({prompt: false});
{dialog.object}.panelSetActive('PANELCARD_1',true);


var wo = {};
wo.icon = 'Images/wait_dots_red.gif';
{dialog.object}.showWaitMessage('page',wo);
setTimeout(function(){{dialog.object}.refreshListData('LIST1',{mode: "incremental"}); },0);

I like the explanation of the user, staticsan, here:
https://stackoverflow.com/questions/...metimes-useful

[jgrannis]

Re: Lag in Panel Transitions on Android using PhoneGap

You could also start with the wait message, do the refreshListData and then configure the list's Detail View event, afterRefreshListIncremental, to set the active panel.

[lilmofo812]

Re: Lag in Panel Transitions on Android using PhoneGap

Tried both options and neither seems to make much of a difference :(

I have tested other much smaller components that have similar code (ie code to move a panel into view and run a refresh) using google chrome and I see a very momentary lag (nothing like with the larger component), but still a lag nonetheless. This leads me to believe that this is a DOM issue, ie when the screen transitions it is having to re-draw the whole DOM. I believe I read an article some where about this and how to use css animations and the z-index property to prevent having to redraw the DOM all the time, does that make sense as a solution? And if so do you know of a way to force the panel card transitions to be done with css animation rather than how they normally are done (being it isn't already done by css)?

[peteconway]

Re: Lag in Panel Transitions on Android using PhoneGap

Sound like a bug, report it with a test case.

[dbinns]

Re: Lag in Panel Transitions on Android using PhoneGap

I've noticed the same issue, and being relatively new to this just assumed it was normal. I am now in the habit of not using animation.

[lilmofo812]

Re: Lag in Panel Transitions on Android using PhoneGap

So to do a test I started a new component and slowly added in the panel cards and all the controls contained within them 1 at a time. In doing this I republished the component after each add in (the component is on an a5w page) and tested in google chrome. Animations had zero issues UNTIL I wrapped everything up in a panel navigator. As soon as I removed the panel navigator the lag went away so I am curious if any of you are using a panel navigator?

The only downside I am seeing visually when not using the panel navigator is that I have it set to use tab buttons and since my panels are laid out left to right when I have one of the main list panels open and click a tab button to open a panel that is to the left it doesn't animate, curious if there is a way to get it to animate in both direction without using a panel navigator since that seems to be the cause of the issue? I am setting the panelSetActive animation parameter to true so I am guessing this is just an issue since the panel being opened is to the left of the panel already opened.

[jgrannis]

Re: Lag in Panel Transitions on Android using PhoneGap

I definitely use panel navigators ...and use the onPanelActivateComplete event associated with them a lot.
I just prefer to set the animation to false when doing a panelSetActive.
BTW, I don't know if you are setting focus to any input element as you arrive on a panel. I've read that it immediately causes a double reflow.
In my app, I have a particular panel where the user can use a bluetooth barcode scanner to quickly scan in rows to a list. It was very laggy until I found a way not to scan into (and keep getting focus of) an input element.

[lilmofo812]

Re: Lag in Panel Transitions on Android using PhoneGap

For me it looks like the only issue was the panel navigator (though I still need to test this on my actual android device in the phone gap environment but I feel it's promising since I'm seeing better load times in chrome on my computer which I wasn't with the other component). Looks like chrome and the underlining web view it uses on android is just not as equipped to handle this control as safari on iOS. If I ever get time to dive into the development tools in both safari and chrome I'll report back on what I am seeing as the issue (though I am sure there are smarter people here that already know what is happening and maybe they'll chime in as well).


Greatly appreciate all your feedback on this Jeff!

[alexc]

Re: Lag in Panel Transitions on Android using PhoneGap

Hey Jeff could you share your test ux I give it a shot and look into it. Definely something not right.

[lilmofo812]

Re: Lag in Panel Transitions on Android using PhoneGap

I know this is slightly off topic but still pertaining to lag in Android, has anyone found a good solution to cut out the 300ms button click delay? I see the delay whether I use the abstract onclick event, ontap event, or the normal onClick event?

Everything I have read pertaining to this says that Google Chrome as gotten rid of the delay as long as you use the following meta tag, which I have added in my PhoneGap build:

<meta name="viewport" content="width=device-width">

I also added the following code to the Local CSS Definitions (not sure that was the right place to add it so let me know if I need to try somewhere else)

html {
  touch-action: manipulation;
}

This is the last thing I need to get fixed for my app to really have that true native feel on Android.

[asap rich]

Re: Lag in Panel Transitions on Android using PhoneGap

I've been having the opposite problem of yourself Josh. Instead of the panel transition happening slowly, it happens so quickly that the data doesn't have time to reload.

For instance, my list has several customer records that go to a detail view when clicked. If I click the first record, it works fine and loads info into the detail as expected. When I click back to the list and select the next record, you can visibly see the panel set...then the last record data is visibly wiped off before being replaced by the new data from the list record I just selected.

Does anyone know how to slow down the panelSet list event, to at least give the app time to load the NEW data before the panel is visible?