Improve settings loading strategy by loading CSS and JS at the same time to prevent the style to be applied afterwards on slow connections

This commit is contained in:
Guillaume Gomez 2022-05-05 20:19:40 +02:00
parent 12d3f107c1
commit 87b6326d67
2 changed files with 4 additions and 4 deletions

View File

@ -303,6 +303,9 @@ function loadCss(cssFileName) {
getSettingsButton().onclick = event => { getSettingsButton().onclick = event => {
event.preventDefault(); event.preventDefault();
// Sending request for the CSS and the JS files at the same time so it will
// hopefully be loaded when the JS will generate the settings content.
loadCss("settings");
loadScript(window.settingsJS); loadScript(window.settingsJS);
}; };

View File

@ -3,7 +3,7 @@
/* eslint prefer-const: "error" */ /* eslint prefer-const: "error" */
/* eslint prefer-arrow-callback: "error" */ /* eslint prefer-arrow-callback: "error" */
// Local js definitions: // Local js definitions:
/* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme, loadCss */ /* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
/* global addClass, removeClass, onEach, onEachLazy, NOT_DISPLAYED_ID */ /* global addClass, removeClass, onEach, onEachLazy, NOT_DISPLAYED_ID */
/* global MAIN_ID, getVar, getSettingsButton, switchDisplayedElement, getNotDisplayedElem */ /* global MAIN_ID, getVar, getSettingsButton, switchDisplayedElement, getNotDisplayedElem */
@ -207,9 +207,6 @@
}, },
]; ];
// First, we add the settings.css file.
loadCss("settings");
// Then we build the DOM. // Then we build the DOM.
const el = document.createElement("section"); const el = document.createElement("section");
el.id = "settings"; el.id = "settings";