How to remove Flickering Issue in Angular JS in page loading while routing?

Discussion in 'Programming' started by a.k.singh, May 3, 2017.

  1. a.k.singh

    a.k.singh New Member
    Recruit

    While routing from one state to another, the flickering issue persists. I have tried number of available solutions like ng-cloak, but none of them provided expected results. Any kind of help will be appreciated.
     
  2. Akil

    Akil Member
    Disciple

    For any once else that comes across this, the flickering is normally due to FOUC(Flash of unstyled content), basically the css and other stuff is loaded a little latter causing the website to look unstyled. To fix this you can use ng-cloak as the OP has tried or if its a heavy site then just put a pleasing loading animation that covers the screen until everything is loaded
     
  3. Nishu421

    Nishu421 New Member
    Recruit

    Did you try ng-cloak
    https://docs.angularjs.org/api/ng/directive/ngCloak

    The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display

    I think all angular apps (that doesn't use ng-include to load template)
    should use ng-cloak to prevent to hide all templates until angular compiles it.
     

Share This Page