Issue with ng-show flicker on app load

[Carlos Moreira]

Hello All, 

I'm having an issue with ng-show when the page is loading and making a requests. 

My app has a list with the html looking like this 

<ul ng-show="todo.length">

...

</ul>

And a button when the list is empty

<button ng-show="!todo.length">myButton</button>

My issue is , that my list is being populated on app load by a service call. So initially when the app loads the list is empty, and shows the button, but a second later the list fills, the button disappears and the list reappears. Everything works as expected, except for that flicker. Its a 1 second flicker that is waiting for that list to appear. Is there some different approach to this situation? When the app loads how can I tell my button that there is data, its just being filled up?

Any help is appreciated.

Thank you. 

[Cornelius Kölbel]

Hi,

does the flicker appear in every browser or is it browser specific?

Kind regards
Cornellius

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

-- 
Cornelius Kölbel
corneliu...@netknights.it
+49 151 2960 1417

NetKnights GmbH
http://www.netknights.it
Landgraf-Karl-Str. 19, 34131 Kassel, Germany
Tel: +49 561 3166797, Fax: +49 561 3166798

Amtsgericht Kassel, HRB 16405
Geschäftsführer: Cornelius Kölbel

[Sander Elias]

Hi Carlos,

Delay the display of your view until your data is in. If you are using ngRouter, this is exactly where the resolve block comes in.
If you are not using a router, you can deal with this in your controller/directive

in the view you do something like:
<div ng-if='vm.dataIn'>...your view...</div>

in your controller something like:

  function myController($http) {
     var vm=this;
     //$http should be in a service, not in a controller!!, this is just a sample!
     $http.get('goGetMyData').then(function (response) {
       // handle the response, and put everything in place
       // then 'unlock' the view:

       vm.dataIn = true;
    })
  }

Does that help you?
Regards
Sander

​

[Carlos Moreira]

Thank you! Perfect it worked!

I was doing something similar, but hiding and showing the add button instead, I never thought of just hiding the entire view itself!

[geoffrey emery]

One thing i just noticed recently when doing a resolve on a promise using ngrouter is that its completely bombing when wrapping it in cordova when i wrap it for all ios and some older android devices. Have you heard of that before? 

[Carlos Moreira]

Hmm.. the app I am working on is using Cordova, but havn't tested on a physical device yet. 

I will do so and let you know my results. 

[geoffrey emery]

did you find that it worked ok?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/-_gFemEMmiE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.