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


a.k.singh

New Member
Recruit
Apr 12, 2017
1
0
1
Delhi
www.newgeninfinite.com
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.
 

Akil

Member
Disciple
Jul 30, 2017
3
2
8
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
 

Nishu421

New Member
Recruit
Nov 8, 2017
2
1
1
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.