Spinner is missing from my app in android

ionic-v1
1

Hi, I’m building an app that authenticate to a server, it opens a modal with the log in fields and display an ionic spinner while it talks to the server to authenticate. The problem is that the spinner runs ok in any browser but when I build the app in android it isn’t shown. I was using

<ion-spinner icon="ripple"></ion-spinner>

and I changed it to

<ion-spinner icon="android"></ion-spinner>

and tested building the app and it shows the icon but it doesn’t spin and in the browser it runs ok.
Can anyone tell what am I doing wrong?

2

which android device/OS are you testing on @aolarquin ? This was happening on my iphone 4s as well, but on iphone 6 it worked just like the browser…

I found that on the 4s, there was a slight delay when starting the spinner which then caused my service to be invoked first which then blocked the spinner from showing. Havent tried android yet but i’m interested to understand what you’re seeing so I can look out for it…

Just for testing purposes try putting a large timeout around your auth service to see if the spinner shows up.

3

I kept testing and found out that the problem is with the modal, I put a spinner in other parts of the app and they ran ok but inside the modal they doesn’t show and the ones who does doesn’t spin. This is my modal template code

 <ion-modal-view>    
            <ion-header-bar> 
               <button class="button button-icon iconv ion-chevron-down" ng-click="closeModal()" ng-disabled="loading"></button>
              <h1 class="title">Ingresar</h1> 
            </ion-header-bar>   
            <ion-content> 
               <form name="loginForm" class="list list-inset">
                  <label class="item item-input"> 
                       <input type="email" placeholder="Mail" ng-model="loginData.mail" required> 
                  </label>     
                  <label class="item item-input"> 
                       <input type="password" placeholder="Contraseña" ng-model="loginData.password" required> 
                  </label>
               </form>    
               <div style="padding: 3%"> 
                    <button class="button button-block button-positive" ng-disabled="(!loginForm.$valid || loading)" ng-click="submitLogin()">Ingresar</button> 
               </div>         
                   <ion-spinner icon="ripple" ng-show="loading"></ion-spinner> 
           </ion-content> 
        </ion-modal-view>
1 Like
4

I found I had to add class attribute to the spinner when inside the $ionicLoading modal to get the spinner to show:

        $ionicLoading.show({
            noBackdrop: true,
            template: '<p><ion-spinner icon="ripple" class="spinner-calm"></ion-spinner></p>'
        });

Hopefully similar problem for your modal.

5

Nope, i tried but it didn’t work, still looking for an answer but thanks anyway

6

I kept testing and found out that if I set icon=“android” inside my ion-spinner it works perfect, the icon display and spins ok if but if I set icon=“ios” it displays the icon but it doesn’t spin and if I set icon with some of the others it displays anything. So where is the problem the fact that it only displays the “android” spinner ok has anything to do with me testing it on an android device?

7

Wondering if your Android is a version before 4.4 (KitKat) ?

Starting with 4.4 they switched to using the much better Chrome web view rather than the not so great Android browser.

If you do have the older Android you might give Crosswalk a try (http://ionicframework.com/blog/crosswalk-comes-to-ionic/) as this will package a Chrome web view with the App. I haven’t tried it though.

Another shot in the dark: Have you tried enclosing the spinner in <p> tags ?

8

i’ve android too and the if i put all the spinner in a single debug page
only the first one is working (android)
some does not appears (bubble)
some other appears but does not animate

9

Tested with 4.4.x and all the spinners are working
instead 4.2.x is crap, only “android” icon works perfectly.

So the only solution is to detect if is_android() and compare version and define a constant or a global
with the spinner icon to use across the application