Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove ng-cloak from <body> #1825

Merged
merged 31 commits into from Apr 25, 2019

Conversation

Projects
None yet
2 participants
@jiru
Copy link
Member

commented Mar 14, 2019

We currently put ng-cloak on the <body> tag in order to hide unstyled elements during page load. As a result, pages appear as blank while they are loading. This gives a feeling of general slowness of the website.

This PR is an attempt to make pages load faster by:

  • removing ng-cloak from <body>
  • dispatching it on specific parts of the pages that really needs to be hidden during load
  • providing the hidden parts with basic CSS positioning styles like min-height so that the content is not jumping around when parts hidden with ng-cloak get displayed

On most of the pages that have been converted to AngularJS (like /register), everything after the title is hidden during load. On the main page (/), the welcome message is displayed during loading. On pages that are not converted to AngularJS yet (like /sentences/show/), the content is displayed as soon as the page is downloaded.

Another indirect benefit is that CakePHP errors are not hidden by ng-cloak any more.

jiru added some commits Mar 5, 2019

Remove ng-cloak from <body>
I want to apply ng-cloak on individual parts of the page,
so that the page can start to display before the AngularJS app
is ready, so that it feels like it loads faster.
Set ng-cloak on the search bar
And fix the height of the search bar, so that everything
below it doesn’t move up or down once the search bar is loaded.
Set ng-cloak on language drop downs
These already have fixed widths and heights, so they won’t
move the content around them once the AngularJS app is loaded.
Fix size of material submit buttons
This prevent material buttons from changing size once loaded.
Put ng-cloak on sentence blocks
They really are a mess before AngularJS styles them.
Hide 'search' text from '/' page search button
during page loading.

I added a vertical-align rule so that the content below
doesn’t move up and down during page load.
Remove useless checkbox
This checkbox isn’t displayed,
nor it is necessary data to send upon registration.
Use good old hidden form instead of ng-hide
because ng-hide only starts working
after dom content is loaded.
ng-cloak sentences on the top of sentence comments
The height of the card showing the sentence text
can’t be reasonably guessed, so it will move
a little bit during loading.
Make unstyled md-icon less terrible
<md-icon>foo</md-icon> displays terribly messy when not styled.
This commit makes it less terrible by preventing the text
from wrapping and hiding overflowing text.
Prevent the CC icon from moving around
when AngularJS starts and ng-cloak is not used.
Make search bar and banner green during ng-cloak
so that the color doesn’t flicker during load.

@jiru jiru changed the title Selectively hide parts of pages using ng-cloak Remove ng-cloak from <body> Mar 14, 2019

@trang trang added this to the 2019-03-24 milestone Mar 14, 2019

@trang trang modified the milestones: 2019-03-24, 2019-03-31 Mar 22, 2019

@trang

This comment has been minimized.

Copy link
Member

commented Mar 22, 2019

Besides the error with saving draft private messages, it looks good to me. I'm moving this to the next milestone to test a bit more.

One note on the user experience: instead of having the feeling that the website is slow, it actually gives me the feeling that the website is broken for a short moment, because I've been used to seeing everything appear at once. I suspect as a result that some users will also feel as if something is wrong at first, but will probably get used to it after some time.

@trang trang modified the milestones: 2019-04-06, 2019-04-27 Apr 7, 2019

Fix auth token error when saving drafts
Having the input as hidden lead to an error when saving a draft:

Tampered field 'submitType' in POST data (expected value '' but found 'saveDraft') Cake\Controller\Exception\AuthSecurityException

This bug was introduced by c3d1307.

@trang trang merged commit 8d60171 into dev Apr 25, 2019

2 checks passed

continuous-integration/jenkins/branch This commit looks good
Details
continuous-integration/jenkins/pr-merge This commit looks good
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.