Show loading throbber on the input field during initial load

Author: notriddle

src/librustdoc/html/static/css/rustdoc.css

@@ -1955,7 +1955,13 @@ a.tooltip:hover::after {
 	color: transparent;
 }
 
-#search-tabs .count.loading::before {
+.search-form.loading {
+	--search-tab-button-background: var(--button-background-color);
+}
+
+#search-tabs .count.loading::before,
+.search-form.loading::before
+{
 	width: 16px;
 	height: 16px;
 	border-radius: 16px;
@@ -1982,7 +1988,9 @@ a.tooltip:hover::after {
 	top: 2px;
 	animation: rotating 1.25s linear infinite;
 }
-#search-tabs .count.loading::after {
+#search-tabs .count.loading::after,
+.search-form.loading::after
+{
 	width: 18px;
 	height: 18px;
 	border-radius: 18px;
@@ -1997,6 +2005,18 @@ a.tooltip:hover::after {
 	animation: rotating 0.66s linear infinite;
 }
 
+.search-form.loading::before {
+	left: auto;
+	right: 9px;
+	top: 8px;
+}
+
+.search-form.loading::after {
+	left: auto;
+	right: 8px;
+	top: 8px;
+}
+
 #search .error code {
 	border-radius: 3px;
 	background-color: var(--search-error-code-background-color);

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

@@ -256,7 +256,7 @@ function preLoadCss(cssUrl) {
                 const params = window.searchState.getQueryStringParams();
                 const autofocusParam = params.search === "" ? "autofocus" : "";
                 hdr.innerHTML = `<nav class="sub">
-                    <form class="search-form">
+                    <form class="search-form loading">
                         <span></span> <!-- This empty span is a hacky fix for Safari: see #93184 -->
                         <input
                             ${autofocusParam}

src/librustdoc/html/static/js/search.js

@@ -5075,6 +5075,11 @@ const database = await Stringdex.loadDatabase(hooks);
 if (typeof window !== "undefined") {
     docSearch = new DocSearch(ROOT_PATH, database);
     await docSearch.buildIndex();
+    onEachLazy(document.querySelectorAll(
+        ".search-form.loading",
+    ), form => {
+        removeClass(form, "loading");
+    });
     registerSearchEvents();
     // If there's a search term in the URL, execute the search now.
     if (window.searchState.getQueryStringParams().search !== undefined) {