Loading ui-view content before rendering rest of page content

Question

I have a header and a footer which are pure html and a div between which loads all my views using ui-view, so it looks something like this:

<body>
  <header></header>
  <div ui-view></div>
  <footer ng-cloak></footer>
</body>

My page loads up properly, the problem I have is that for a short duration my footer loads up before my content and fills up the entire page. I tried using ng-cloak as mentioned in this thread:AngularJS strategy to prevent flash-of-unstyled-content for a class

sadly it doesn't seem to work, is there any way to load the ui-view content before I render the footer?

EDIT: My ui-router is configured similar to this:

function configRoutes($stateProvider){
  $stateProvider
    .state('login', {
      url: '/login',
      template: '<login></login>'
    });
}

The login directive renders a form nothing fancy.

A simple aproach would be adding a default height (`100%` I guess) for your `div[ui-view]` element, so that your `footer` wouldn't fill up the entire page. — lenilsondc, Apr 24 '17 at 19:55
That doesn't seem to work as my ui-view tag has no content so height 100% would still be just 0px. Also, I'd much rather just load the footer after the content loads in if that's possible. EDIT: I could put in a height:100vh to do it the way you suggested but it still feels a bit weird when the page loads in to see the header and footer but nothing in the middle. — Vishal Rao, Apr 24 '17 at 20:00
Sorry, I've expressed badly, I meant to say, use a `min-height` value, so that your `div[ui-view]` will never be zero height. — lenilsondc, Apr 24 '17 at 20:03

0 Answers0