bad android loading screen

[Michael]

I updated to the newest kendo release yesterday and I've noticed that the loading graphics (i.e. app.application.showLoading();) have changed on android, but not on iOS. I like the graphics on iOS, where the motion icon is centered over the app. Android displays a dark translucent sheet over the entire app. It looks bad. How can I get rid of it?

[Kiril Nikolov]

Hi Michael,

This is the default behavior of the loading animation when the app is run on Android. You can either override the CSS, so it can look the way you require it, or you can just force the application to run in iOS mode on all devices, using this configuration property:

http://docs.telerik.com/kendo-ui/api/mobile/application#configuration-platform

Regards,
Kiril Nikolov
Telerik

[Michael]

the override doesn't work. It just makes all of the buttons on android turn blue. loading icons etc. stay the same (90% of the time). that config property might just be broken in the newest release.

is there a code snippet available that would override just the loading graphic and replace it with the ios version?

[Kiril Nikolov]

Hi Michael,

I am afraid that there is not a built-in way to override the loading popup behavior. 

As for the override - the following example looks the same on all devices:

http://jsbin.com/qakot/1/edit

Regards,
Kiril Nikolov
Telerik

[Michael]

The documentation lists the platform options as "android" and "ios". The example uses: platform: "ios7". Using "ios7" did fix the issue of the weird blue buttons, etc. However, the loading screen only acts like the ios version on android the first time that it is called. Every time after it reverts to the default android behavior. I'm not sure how well that option has been tested, but it certainly fails at some point. You may want to examine it under more elaborate conditions.

Is there a specific element I can override or look for in the css? If I knew what it was called, I could go in and get rid of it.

[Michael]

To clarify my previous statement, it does not always revert back to the default android version. Its actually completely random. Sometimes the ios version comes up, sometimes the android one comes up. Triggered by the same buttons, links, etc. 

[Kiril Nikolov]

Hello Michael,

This is not a known issue.

I have a question for you - are you sure that you are not initializing the Kendo UI Mobile Application more than once (having the new kendo.mobile.Application statement more than once in your code)? If this is not the case, please send us an example that we can examine.

Thank you in advance for your cooperation,

Regards,
Kiril Nikolov
Telerik

[Michael]

No, it is only initialized once. There are ten or so view models that we employ, along with footer navigation and drawer navigation. Most data is pulled in through ajax calls. Unfortunately the app is a login-based service for internal company personnel, so I can't supply a working version of it. To walk you through an example., lets say a view is up that contains a footer, and the footer has four tabs: A, B, C, D - all of which trigger an ajax call and then a switch to another view. The views all share the same footer.

If you click B, you'll usually get the iOS loader the first time. Then click C and you might get either iOS or Android default. Click B again - could be either.

Same story throughout the app. Completely random behavior - even on the same element.

[Michael]

For what its worth - the app runs fine on the simulator. Its only on the actual android device that the sporadic behavior is observed.

[Kiril Nikolov]

Hi Michael,

Are you able to reproduce the same behavior using this example:

http://jsbin.com/nayig/1/edit

If not, please edit it, so it can reproduce the problematic behavior. I am afraid that without an actual reproduction of the problem, we are not able to pinpoint the reason for the issue and assist you further.

Thank you very much for your cooperation.

Regards,
Kiril Nikolov
Telerik

[Michael]

I wouldn't know where to begin. We've been developing the app for months. Its impossible for me to know which specific component is the source of the bug. I can see if maybe we can open a support ticket and I could offer you a version w/ your own login for testing purposes/

In the meantime, are there specific css elements or js functions that I can target/erase/override to get rid of the translucent screen? If I knew what to edit, I could just eliminate the problem that way.

[Kiril Nikolov]

Hello Michael,

I am not really sure what exactly you are trying to achieve, as the loading animation displays a small loading bar on the bottom of the app, and does not overlay the whole application. You can adjust its opacity, by using the km-loader class and override its background-color: rgba() rule. Please check the following screencast that might be helpful:

http://www.screencast.com/t/s3XNWfQkbFqc

Regards,
Kiril Nikolov
Telerik

[Michael]

Thats not what it looks like at all. It fills the entire screen and has a different spinning graphic in the center.

I've never seen anything like what was in that screencast before.

Is that whats supposed to happen when you call app.application.showLoading();, or are we talking about two different things?

[Michael]

See attached. That is what the android loading animation looks like. It used to not have the dark background, but it has always been full-screen and centered.

[Michael]

The "correct" version does not have the dark background. It is the same graphic with a turquoise circle around it, centered in the middle of the app..

That is what appears on iOS, and what used to always appear on Android. Now, with platform: "ios7", it randomly jumps between the two on Android.

[Michael]

so, in kendo.mobile.min.js there's this: o=e('<div class="km-loader"><span class="km-loading km-spin"></span><span class="km-loading-left"></span><span class="km-loading-right"></span></div>');

By messing with it (for instance: <span class="km-loading-right" style="background: red;"></span>), you can change the color of the loading animation bars. So I know that this animation displays 100% of the time.

What is still a mystery is why sometimes there is a full-screen translucent sheet over the app while it displays..

[Michael]

I did some additional testing. platform: "ios7" actually has no effect whatsoever on the loading animation.  I'm not so sure it has any effect on the app at all - but that's another issue.

as far as I can tell, something in kendo.mobile.min.js is sometimes triggering the display of a dark full-screen translucent sheet that appears simultaneous with the loading graphic after the app.application.showLoading() call is made.

Since it happens at random, it stands to reason that it isn't connected to the code surrounding the app.application.showLoading() calls, but rather some peculiarity within kendo.mobile.min.js

[Michael]

I tried two more tests.

test #1) switch back to Kendo UI Mobile v2013.2.1021 of kendo.mobile.min.js
this had no effect.

test #2) switch back to Kendo UI Mobile v2013.2.1021 of kendo.mobile.all.min.css
this got rid of the problem.

So, I was wrong. It is not some peculiarity of kendo.mobile.min.js. It is something that was changed in the newest release of kendo.mobile.all.min.css

[Kiril Nikolov]

Hi Michael,

Thank you very much for the detailed information.

Could you please tell me do you set the skin:"flat" option on your application. From the screenshot provided it looks like the loading screen that you see is the one displayed with the flat skin as in this demo:

http://demos.telerik.com/kendo-ui/mobile/application/loadingpopup.html

If this is the case setting both platform and skin options for the same application, can cause the behavior that you observed (switching themes).

As for the overlaying  - yes the flat skin loaded has overlaying of the view. In order to make it transparent, please use the following CSS rule:

.km-flat.km-loader:before{
    background: transparent !important;
}

Regards,
Kiril Nikolov
Telerik

[Michael]

Yes, it is set to flat and yes - that css did resolve the issue. Thank you for your help.

[Kiril Nikolov]

Hello Michael,

I am really happy to hear that we managed to find a solution for the problem. In case you have any further questions, please do not hesitate to ask. 

Regards,
Kiril Nikolov
Telerik