ng-cloak not preventing "flash of unstyled content"

asgeo1 commented 11 years ago

I'm having a weird issue with "flash of unstyled content" (FOUC)

Apparently this is what ng-cloak is designed to fix. But I'm finding that ng-cloak doesn't have any effect when using jquery-mobile-angular-adapter.

Oddly, the first time the router takes me to a page, I don't actually get a FOUC. But every subsequent request will flash the {{expressions}} before they are rendered by angular.

Unfortunately adding an ng-cloak attributes to the elements doesn't seem to have any effect. If I replace my {{expressions}} with ng-bind or ng-bind-template syntax then I don't get any FOUC. But I'd like to just use ng-cloak if possible.

Why would the ng-cloak attribute be removed from my markup before Angular has finished rendering everything? That's the only way I should be able to still see the {{expressions}} since ng-cloak is basically just a display:none css rule.

I just have a pretty typical router:

angular.module('myMobileApp', [])
  .config(['$routeProvider', ($routeProvider) ->

    $routeProvider
      .when '/my-view',
        templateUrl: 'views/my-view.html'

Template is pretty typical:

<div data-role="page" id="permitDetailView" ng-controller="PermitDetailCtrl" data-theme="b" ng-cloak>
  <div data-role="header" data-position="fixed">
    <h1 ng-bind="data.heading"></h1>  <!-- this works -->
  </div>

  <div data-role="content">
    <h2 ng-cloak>{{data.heading2}}</h2> <!-- this doesn't work -->
  </div>
</div>

I have a feeling this is a jquery-mobile-angular-adapter or jquery-mobile issue, since I don't have the same issues in a stock angularjs project.

Any ideas on what the issue could be?

NOTE: if you're testing on a desktop, you'll probably never see a FOUC. I can see it pretty clearly on my iPhone 4 though.

tbosch commented 11 years ago

Hi, thanks for submitting! Yes, ng-cloack does not work yet in external pages, your are right. However, you can use it e.g. on your <body> tag for the initial page load, but that's not you problem, right?

Could you create a working example using this plunk? http://plnkr.co/edit/ZrKB8H4fjnlak6WgKOTj You can create external pages, ... there. This would help a lot!

Thanks, Tobias

asgeo1 commented 11 years ago

Hi tigbro,

Yes, the issue is with the external pages.

I've created this plunk: http://plnkr.co/edit/FmXVCiv0cdMWDozOAQwT which hopefully demonstrates the issue.

But I can't work out how to run the damn thing on my iPhone though - the screen is too small to get to the 'Run in new window' button.

But I tried it on my iPad 1 and iPad 4, and I can see the FOUC on both of them when I click through on the listview. It's much more noticeable on the iPad 1, with it obviously being slower.

Cheers, -adam

m-rouget commented 11 years ago

Hello,

I confirm that I have the same issue. It is very noticeable on one of my testing device, which is an industrial embedded computer, running Firefox on a 1 Ghz ARM processor.

The only workaround I found yet is to reproduce the ng-cloak effect by hand. I works, but this is not very convenient if you have many or complex controllers. I am a quite a newbie in JavaScript, there can be more elegant solutions.

HTML

I add class "my-cloak" to my content div (the one with data-role="content") or any other relevant div. The controller of this div is ApplicationCtrl

JS


function ApplicationCtrl($scope, $routeParams, Application) {
    $scope.data = Application.get(function () {
        // Application.get does a GET request to a REST API...
        // --- do something awesome
        $('.my-cloak').removeClass('my-cloak');
    });
}

CSS


.my-cloak {
  display: none  !important;
}

... mmmm and did I said that your work on the JQM / AngularJS is awesome ?

tbosch commented 11 years ago

Hi, if you want to run your plunk without an iframe, use this url: http://run.plnkr.co/J0C6C9hBK5ApjFTx/. You get it when you click on the "windowed mode" icon in the preview pane...

tbosch commented 11 years ago

Hi, sorry, can't reproduce it with this plunk... When do you see the FOUC? When you visit the list? When you click on an item the first time? Every time you click on an item?

Thanks, Tobias

tbosch commented 11 years ago

Hi, I was able to reproduce the problem and also found the source for it: The adapter used to do the digesting within a $timeout. The last commit changed this.

Could you also test the changes?

Thanks, Tobias

m-rouget commented 11 years ago

Hello,

I updated to JQM 1.3.1 and adapter 1.3.1, and it seems to resolve the issue for me. I removed my ugly workaround, and there is no more flickering.

However, I do not even need to use the ng-cloak directive to prevent flickering... which is quite unexpected.

Thanks for the fix. Matthieu

tbosch commented 11 years ago

Hi, thanks for the feedback. Yes, the ng-cloak directive should not be needed.

Closing this...

opitzconsulting / jquery-mobile-angular-adapter

ng-cloak not preventing "flash of unstyled content" #167

HTML

JS

CSS