maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix flash of unstyled content (#12385)

Browse source 
* Fix flash of unstyled content

* Fix test context

* Add missing user in test

* Add qualifier argument
This commit is contained in:
Ben Halpern 2021-01-25 10:49:58 -05:00 • committed by GitHub
parent 2cd523f811
commit 8b5b19bfa8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/views/layouts/_asset_reconciliation.html.erb
View file

@ -20,30 +20,29 @@
var pageCrayons = document.querySelector("meta[name='proper-stylesheet-crayons']");
var pageViews = document.querySelector("meta[name='proper-stylesheet-views']");
var pageMinimal = document.querySelector("meta[name='proper-stylesheet-minimal']");
if (headCacheCheck && headCrayons && // If these elements exist, we can proceed.
parseInt(pageCacheCheck.content) > parseInt(headCacheCheck.content) && // If page cached-at is larger than head cached-at
(pageCrayons.content != headCrayons.href || // If the head-cached values do not match page-cached, we replace
pageViews.content != headViews.href ||
pageMinimal.content != headMinimal.href)
) {
var head = document.head;
var docBody = document.body;
// Add new stylesheets if we deem we should.
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = pageCrayons.content;
head.appendChild(link);
docBody.appendChild(link);
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = pageViews.content;
head.appendChild(link);
docBody.appendChild(link);
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = pageMinimal.content;
head.appendChild(link);
docBody.appendChild(link);
// Take a breath and then remove the old ones.
// If we call this immediately it could cause a flash of unstyled comments.

12
app/views/layouts/_styles.html.erb
View file

@ -1,9 +1,3 @@
<%# We used to inline a good majority of our CSS %>
<%# We are currently testing a simpler method of just using "traditional" render-blocking CSS %>
<%# The trade-off is the potential to render without blocking the page %>
<%# But if we in-line everything we lose the ability to cache assets for repeat visitors %>
<%# This is a production test to see how this might affect UX and/or SEO %>
<%= stylesheet_link_tag "crayons", media: "all", id: "main-crayons-stylesheet" %>
<%= stylesheet_link_tag "views", media: "all", id: "main-views-stylesheet" %>
<%= stylesheet_link_tag "minimal", media: "all", id: "main-minimal-stylesheet" %>
<%= stylesheet_link_tag "crayons", media: "all", id: "#{qualifier}-crayons-stylesheet" %>
<%= stylesheet_link_tag "views", media: "all", id: "#{qualifier}-views-stylesheet" %>
<%= stylesheet_link_tag "minimal", media: "all", id: "#{qualifier}-minimal-stylesheet" %>

4
app/views/layouts/application.html.erb
View file

@ -22,7 +22,9 @@
</div>
<% end %>
<%= yield %>
<%= render "layouts/asset_reconciliation" %>
<% if user_signed_in? %>
<%= render "layouts/asset_reconciliation" %>
<% end %>
</div>
</div>
<%= render "shell/bottom" %>

11
app/views/shell/_top.html.erb
View file

@ -17,14 +17,7 @@
<meta name="monetization" content="<%= SiteConfig.payment_pointer %>">
<% end %>
<meta name="environment" content="<%= Rails.env %>">
<%= render "layouts/styles" %>
<style>
.home {
position: relative;
margin: auto;
max-width: 1250px;
}
</style>
<%= render "layouts/styles", qualifier: "main" %>
<% unless user_signed_in? %>
<%= javascript_packs_with_chunks_tag "base", "Search", defer: true %>
<% end %>
@ -63,6 +56,8 @@
data-deployed-at="<%= ForemInstance.deployed_at %>"
data-latest-commit-id="<%= ForemInstance.latest_commit_id %>"
data-ga-tracking="<%= SiteConfig.ga_tracking_id %>">
<%# Repeat of stylesheets in <head> to fix rendering glitch: https://github.com/forem/forem/issues/12377 %>
<%= render "layouts/styles", qualifier: "secondary" %>
<div id="body-styles">
<style>
:root {

28
spec/requests/stories_index_spec.rb
View file

@ -12,6 +12,8 @@ end
RSpec.describe "StoriesIndex", type: :request do
describe "GET stories index" do
let(:user) { create(:user) }
it "renders page with article list and proper attributes", :aggregate_failures do
article = create(:article, featured: true)
navigation_link = create(:navigation_link)
@ -159,16 +161,22 @@ RSpec.describe "StoriesIndex", type: :request do
expect(response.body.scan(/(?=class="crayons-story__cover__image)/).count).to be > 1
end
it "has necessary asset reconciliation code" do
# Ensure code elements are available for fixing assets if necessary.
# app/views/layouts/_asset_reconciliation.html.erb
# Basic regression test to ensure we don't accidentally remove something we should not.
get "/"
expect(response.body).to include('<meta name="head-cached-at"')
expect(response.body).to include('<meta name="page-cached-at"')
expect(response.body).to include('"main-crayons-stylesheet"')
expect(response.body).to include('"main-minimal-stylesheet"')
expect(response.body).to include("if (headCacheCheck && headCrayons &&")
context "when user signed in" do
before do
sign_in user
end
it "has necessary asset reconciliation code" do
# Ensure code elements are available for fixing assets if necessary.
# app/views/layouts/_asset_reconciliation.html.erb
# Basic regression test to ensure we don't accidentally remove something we should not.
get "/"
expect(response.body).to include('<meta name="head-cached-at"')
expect(response.body).to include('<meta name="page-cached-at"')
expect(response.body).to include('"main-crayons-stylesheet"')
expect(response.body).to include('"main-minimal-stylesheet"')
expect(response.body).to include("if (headCacheCheck && headCrayons &&")
end
end
context "with campaign hero" do