login display jitter

[yieme]

/login experiences display jitter showing the Repeat Password field and the Sign Up button for an instant. This appears to be due to browser displaying the page in a uncompiled form while the application is loading. Ref: https://docs.angularjs.org/api/ng/directive/ngCloak

[yieme]

A possible correction might be to inline ng-cloak in views/main-mixins.jade, going from:

mixin defaultHead()
    +defaultMeta()

To:

mixin inlineStyle()
    style.
      [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }

mixin defaultHead()
    +defaultMeta()
    +inlineStyle()

Next, apply ng-cloak to the Repeast Password field in views/login.jade line 9, going from:

input.form-control(type='password', placeholder=messages("Repeat Password"), required='', name='password_repeat', ng-model="user.passwordRepeat", ng-if="isSignUp", ng-class="{'has-error': !passwordMatches()}")

To:

input.form-control(ng-cloak, type='password', placeholder=messages("Repeat Password"), required='', name='password_repeat', ng-model="user.passwordRepeat", ng-if="isSignUp", ng-class="{'has-error': !passwordMatches()}")

Lastly, apply ng-cloak to the Sign Up button in views/login.jade line 17, going from:

button.btn.btn-lg.btn-success.btn-block(ng-if="isSignUp", ng-click="$event.stopPropagation(); signUp()", ng-disabled="!passwordMatches()")= messages('Sign Up')

To:

button.btn.btn-lg.btn-success.btn-block(ng-cloak, ng-if="isSignUp", ng-click="$event.stopPropagation(); signUp()", ng-disabled="!passwordMatches()")= messages('Sign Up')

Thoughts?