Rollup merge of #96741 - GuillaumeGomez:improve-settings-loading-stra…

…tegy, r=jsha

Improve settings loading strategy

I learned about this thanks to `@jsha` who suggested this approach:

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

r? `@jsha`

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

@@ -303,6 +303,9 @@ function loadCss(cssFileName) {
     getSettingsButton().onclick = event => {
         addClass(getSettingsButton(), "rotate");
         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 */
 
@@ -209,9 +209,6 @@
             },
         ];
 
-        // First, we add the settings.css file.
-        loadCss("settings");
-
         // Then we build the DOM.
         const el = document.createElement("section");
         el.id = "settings";