Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Slightly defer loading Discourse stylesheets (#17078) 

This is related to #17063 and is also a pre-request for the splash screen work.

This PR introduces 0 visual or functional changes. It just relocates the stylesheets in the load order.
`.css` stylesheets block the browser render. We need to move those out of the <head> tag.

However, they still need to be loaded before core/plugin/theme rendered HTML to avoid FOUC.
This commit is contained in:
Joe 2022-06-20 10:37:28 +08:00 committed by GitHub
parent ef5b504e9a
commit 2f66eb59c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/discourse/app/index.html
View File

@ -20,6 +20,13 @@
{{content-for "head"}}
</head>
<body>
<discourse-assets>
<discourse-assets-stylesheets>
<bootstrap-content key="discourse-stylesheets">
{{content-for "discourse-stylesheets"}}
</discourse-assets-stylesheets>
</discourse-assets>
<bootstrap-content key="body">
{{content-for "body"}}

43
app/assets/javascripts/discourse/lib/bootstrap-json/index.js
View File

@ -64,26 +64,6 @@ function head(buffer, bootstrap, headers, baseURL) {
});
buffer.push(`<meta id="data-discourse-setup"${setupData} />`);
(bootstrap.stylesheets || []).forEach((s) => {
let attrs = [];
if (s.media) {
attrs.push(`media="${s.media}"`);
}
if (s.target) {
attrs.push(`data-target="${s.target}"`);
}
if (s.theme_id) {
attrs.push(`data-theme-id="${s.theme_id}"`);
}
if (s.class) {
attrs.push(`class="${s.class}"`);
}
let link = `<link rel="stylesheet" type="text/css" href="${
s.href
}" ${attrs.join(" ")}>`;
buffer.push(link);
});
if (bootstrap.preloaded.currentUser) {
const user = JSON.parse(bootstrap.preloaded.currentUser);
let { admin, staff } = user;
@ -119,6 +99,28 @@ function beforeScriptLoad(buffer, bootstrap) {
);
}
function discourseStylesheets(buffer, bootstrap) {
(bootstrap.stylesheets || []).forEach((s) => {
let attrs = [];
if (s.media) {
attrs.push(`media="${s.media}"`);
}
if (s.target) {
attrs.push(`data-target="${s.target}"`);
}
if (s.theme_id) {
attrs.push(`data-theme-id="${s.theme_id}"`);
}
if (s.class) {
attrs.push(`class="${s.class}"`);
}
let link = `<link rel="stylesheet" type="text/css" href="${
s.href
}" ${attrs.join(" ")}>`;
buffer.push(link);
});
}
function body(buffer, bootstrap) {
buffer.push(bootstrap.theme_html.header);
buffer.push(bootstrap.html.header);
@ -162,6 +164,7 @@ const BUILDERS = {
"before-script-load": beforeScriptLoad,
head,
body,
"discourse-stylesheets": discourseStylesheets,
"hidden-login-form": hiddenLoginForm,
preloaded,
"body-footer": bodyFooter,

8
app/views/layouts/application.html.erb
View File

@ -9,8 +9,6 @@
<%= render partial: "layouts/head" %>
<%= discourse_csrf_tags %>
<%= render partial: "common/discourse_stylesheet" %>
<%- if SiteSetting.enable_escaped_fragments? %>
<meta name="fragment" content="!">
<%- end %>
@ -73,6 +71,12 @@
</head>
<body class="<%= body_classes %>">
<discourse-assets>
<discourse-assets-stylesheets>
<%= render partial: "common/discourse_stylesheet" %>
</discourse-assets-stylesheets>
</discourse-assets>
<%- if allow_plugins? %>
<%= build_plugin_html 'server:after-body-open' %>
<%- end -%>