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

Author: GuillaumeGomez

src/librustdoc/html/static/js/main.js

@@ -303,6 +303,9 @@ function loadCss(cssFileName) {
 
     getSettingsButton().onclick = event => {
         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);
     };
 

src/librustdoc/html/static/js/settings.js

@@ -3,7 +3,7 @@
 /* eslint prefer-const: "error" */
 /* eslint prefer-arrow-callback: "error" */
 // Local js definitions:
-/* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme, loadCss */
+/* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
 /* global addClass, removeClass, onEach, onEachLazy, NOT_DISPLAYED_ID */
 /* 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.
         const el = document.createElement("section");
         el.id = "settings";