Fix FOUC on Firefox #1728
Fix FOUC on Firefox #1728
Conversation
|
I've tested this on MacOS as well. Looks good in Firefox and Chrome. Did not see any small flashes in Firefox at all, which occasionally show up without this patch applied. I'll try to find some time to test on Windows 7 in the next few days. |
|
Built and tested on Windows 7. I tested Firefox 53, Chrome 58 and IE 11. No FOUC on any of them, not even on initial (uncached) page load. Better than github in that regard. I did not notice any obvious problems with page load speeds on any of the browsers. But I just browsed around the site and compared it to try.gitea.io. No real timing tests. Nice job with the fix. |
templates/base/head.tmpl
Outdated
| <link rel="stylesheet" href="{{AppSubUrl}}/assets/octicons-4.3.0/octicons.min.css"> | ||
| <link rel="preload" href="{{AppSubUrl}}/assets/font-awesome-4.6.3/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'"> | ||
| <noscript><link rel="stylesheet" href="{{AppSubUrl}}/assets/font-awesome-4.6.3/css/font-awesome.min.css"></noscript> | ||
| <link rel="stylesheet" href="{{AppSubUrl}}/assets/octicons-4.3.0/octicons.min.css"> |
There was a problem hiding this comment.
lines 24 and 25 are indented with spaces
There was a problem hiding this comment.
Oh, you use tabs, I didn't notice, I'll fix it.
|
So this will fix #1271? |
|
Not sure about that one, but it does fix #1698 |
|
LGTM |
|
Actually @sondr3 please add the license of the new .js files to https://github.com/go-gitea/gitea/blob/master/public/assets/librejs/librejs.html |
|
@ethantkoenig please confirm your codereview |
|
@strk I'll add them to this PR when I get to my computer in a few hours and push a new change 😃 |
Firefox users will experience a flash of unstyled content on loading various pages, this patch will fix this issue using Filament Groups loadCSS library to asynchronously load the CSS responsible for the FOUC. Will fix #1698. Signed-off-by: Sondre Nilsen <nilsen.sondre@gmail.com>
|
Alright, added the JS files to the |
As mentioned in #1698 Firefox users experience a brief FOUC (flash of unstyled content) while loading various pages in Gitea, this commit should fix this by using Filament Groups loadCSS library to asynchronously load the CSS that makes the pages flash.
This commit will add ~1.5kB of JS to the
<head>of the webpages. The scripts need to be in the head for the FOUC to not occur, if you do it with the scripts in the bottom of the page it will load the CSS too late and the FOUC will occur regardless. You could potentially also inline them but I went with linking to them.You will notice in the before and after from the developer panel that the Font Awesome CSS is loaded last because it will not load until the DOM content is ready.
NOTE: In case users don't have JS enabled it will load the CSS as normal. However I'm not sure if this is required and that I could just remove the
<noscript>line.This is my first pull request to Gitea, so let me know if I need to change anything. 😃