Buttons are slow to update themselves at page load

[YannDoW]

Hello,

I am very happy about oauth-ng except for one thing: when the page is loaded for the first time, I see all three buttons (sign-in, logout, access denied) before two of them disappear and only the sign-in one remains. I guess that Angular is slow to find out that two of them are to be hidden (the ng-show="show=='logged-out'" properties in the 3 spans). I am using the default.html template.

Visually it's very annoying and surprising for the user.

I tried all sorts of CSS tricks to hide the buttons until the show context variable is set, but I was not able to make anything work.

I am using Angular 1.4.6. I'm a beginner at Angular.

Does anyone else has this problem? Am I doing something wrong?

[andreareginato]

I saw the same behaviour. I would suggest to try out and experiment with ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak

[YannDoW]

Thanks for the quick answer, I learned something new about Angular today :)

Unfortunately, it did not solve the problem. I tried putting it at various places, even simultaneously, and the flicker effect is still there. I tried to put it in the <a class="oauth"> tag of the default.html template, in the <oauth> tag itself, in the <div id="loginButton" ng-controller="LoginCtrl"> enclosing it, nothing helps. Pretty distressing.

Ideas are welcome.

[andreareginato]

I see. In this link they make a hack that seems to work. http://stackoverflow.com/questions/19599144/in-angular-is-there-a-way-to-prevent-flicker-in-expressions-that-contain-concat I don't like it at all and I think that ng-cloak with in page CSS (on the header, not CSS file) should work out.

[YannDoW]

I found the solution! And it's a clean one.

I simply added the ng-hide class to the 3 UI elements. So they are hidden by default, and only the right one becomes displayed when the oauth-ng code ultimately takes over and sets the display classes correctly. So here is how my template/default.html file looks like:

<a class="oauth">
  <span href="#" class="logged-out ng-hide" ng-show="show=='logged-out'" ng-click="login()" >{{text}}</span>
  <span href="#" class="logged-in ng-hide"  ng-show="show=='logged-in'"  ng-click="logout()">Logout</span>
  <span href="#" class="denied ng-hide"     ng-show="show=='denied'"     ng-click="login()">Access denied.</span>
</a>

Maybe you'll want to adjust your code this way.
In any case, thanks for your help on this! My app now looks much better.

[andreareginato]

A pull request would be really appreciated @YannDoW.
Thanks for your work

[YannDoW]

I created a Pull Request. I'm still a beginner at GitHub, so I hope I did things properly. I hope it helps.

Thanks!