From 2f66eb59c20a4797c9975100b4d72c668c38b424 Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Mon, 20 Jun 2022 10:37:28 +0800
Subject: [PATCH] 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 tag.
However, they still need to be loaded before core/plugin/theme rendered HTML to avoid FOUC.
---
.../javascripts/discourse/app/index.html | 7 +++
.../discourse/lib/bootstrap-json/index.js | 43 ++++++++++---------
app/views/layouts/application.html.erb | 8 +++-
3 files changed, 36 insertions(+), 22 deletions(-)
diff --git a/app/assets/javascripts/discourse/app/index.html b/app/assets/javascripts/discourse/app/index.html
index 0dde7cb0ab4..4a5295d14ea 100644
--- a/app/assets/javascripts/discourse/app/index.html
+++ b/app/assets/javascripts/discourse/app/index.html
@@ -20,6 +20,13 @@
{{content-for "head"}}
+
+
+
+ {{content-for "discourse-stylesheets"}}
+
+
+
{{content-for "body"}}
diff --git a/app/assets/javascripts/discourse/lib/bootstrap-json/index.js b/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
index 46c891ecc6a..98fc1ed882b 100644
--- a/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
+++ b/app/assets/javascripts/discourse/lib/bootstrap-json/index.js
@@ -64,26 +64,6 @@ function head(buffer, bootstrap, headers, baseURL) {
});
buffer.push(``);
- (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 = ``;
- 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 = ``;
+ 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,
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 0ab67a126c0..3c6f20cbad4 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -9,8 +9,6 @@
<%= render partial: "layouts/head" %>
<%= discourse_csrf_tags %>
- <%= render partial: "common/discourse_stylesheet" %>
-
<%- if SiteSetting.enable_escaped_fragments? %>
<%- end %>
@@ -73,6 +71,12 @@
+
+
+ <%= render partial: "common/discourse_stylesheet" %>
+
+
+
<%- if allow_plugins? %>
<%= build_plugin_html 'server:after-body-open' %>
<%- end -%>