rustdoc-search: redesign throbber to be less distracting

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

@@ -1987,12 +1987,10 @@ a.tooltip:hover::after {
 	color: inherit;
 }
 #search-tabs button:not(.selected) {
-	--search-tab-button-background: var(--search-tab-button-not-selected-background);
 	background-color: var(--search-tab-button-not-selected-background);
 	border-top-color: var(--search-tab-button-not-selected-border-top-color);
 }
 #search-tabs button:hover, #search-tabs button.selected {
-	--search-tab-button-background: var(--search-tab-button-selected-background);
 	background-color: var(--search-tab-button-selected-background);
 	border-top-color: var(--search-tab-button-selected-border-top-color);
 }
@@ -2008,66 +2006,27 @@ a.tooltip:hover::after {
 	color: transparent;
 }
 
-.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;
-	background: radial-gradient(
-		var(--search-tab-button-background) 0 50%,
-		transparent 50% 100%
-	), conic-gradient(
-		var(--code-highlight-kw-color) 0deg 30deg,
-		var(--code-highlight-prelude-color) 30deg 60deg,
-		var(--code-highlight-number-color) 90deg 120deg,
-		var(--code-highlight-lifetime-color ) 120deg 150deg,
-		var(--code-highlight-comment-color) 150deg 180deg,
-		var(--code-highlight-self-color) 180deg 210deg,
-		var(--code-highlight-attribute-color) 210deg 240deg,
-		var(--code-highlight-literal-color) 210deg 240deg,
-		var(--code-highlight-macro-color) 240deg 270deg,
-		var(--code-highlight-question-mark-color) 270deg 300deg,
-		var(--code-highlight-prelude-val-color) 300deg 330deg,
-		var(--code-highlight-doc-comment-color) 330deg 360deg
-	);
-	content: "";
-	position: absolute;
-	left: 2px;
-	top: 2px;
-	animation: rotating 1.25s linear infinite;
-}
-#search-tabs .count.loading::after,
 .search-form.loading::after
 {
 	width: 18px;
 	height: 18px;
 	border-radius: 18px;
-	background: conic-gradient(
-		var(--search-tab-button-background) 0deg 180deg,
-		transparent 270deg 360deg
-	);
-	content: "";
+	/* hourglass */
+	content: url('data:image/svg+xml,\
+	<svg width="16" height="16" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">\
+		<g fill="none">\
+			<path d="m3.019 1.496v1.496l0.5878 1.018-0.5751 0.996v1.494" stroke="%233f3f3f"/>\
+			<path d="m5.003 1.496v1.496l-0.5878 1.018 0.5751 0.996v1.494" stroke="%233f3f3f"/>\
+			<path d="m2.006 1.5h3.978" stroke="%23000"/>\
+			<path d="m2.006 6.49h3.993" stroke="%23000"/>\
+		</g>\
+		<path d="m4.005 5.301-0.3987 0.6905h0.7977z" fill="%237f7f7f"/>\
+		<path d="m4.011 3.712-0.3987-0.6905h0.7977z" fill="%237f7f7f"/>\
+	</svg>');
 	position: absolute;
-	left: 1px;
-	top: 1px;
-	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;
+	filter: var(--settings-menu-filter);
 }
 
 #search .error code {

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

@@ -1,5 +1,5 @@
 // ignore-tidy-filelength
-/* global addClass, getNakedUrl, getVar, nonnull, getSettingValue */
+/* global addClass, getNakedUrl, getVar, getSettingValue, hasClass, nonnull */
 /* global onEachLazy, removeClass, searchState, browserSupportsHistoryApi */
 
 "use strict";
@@ -4804,6 +4804,15 @@ function printTab(nb) {
         if (nb === iter) {
             addClass(elem, "selected");
             foundCurrentTab = true;
+            onEachLazy(document.querySelectorAll(
+                ".search-form",
+            ), form => {
+                if (hasClass(elem.firstElementChild, "loading")) {
+                    addClass(form, "loading");
+                } else {
+                    removeClass(form, "loading");
+                }
+            });
         } else {
             removeClass(elem, "selected");
         }
@@ -5019,7 +5028,9 @@ ${obj.displayPath}<span class="${type}">${name}</span>\
                 await Promise.all(descList);
                 // need to make sure the element is shown before
                 // running this callback
-                yieldToBrowser().then(() => finishedCallback(count, output));
+                yieldToBrowser().then(() => {
+                    finishedCallback(count, output);
+                });
             }
         });
     };
@@ -5156,6 +5167,7 @@ function makeTab(tabNb, text, results, query, isTypeSearch, goToFirst) {
                 count < 100 ? `\u{2007}(${count})\u{2007}` : `\u{2007}(${count})`;
             tabCount.innerHTML = fmtNbElems;
             tabCount.className = "count";
+            printTab(window.searchState.currentTab);
         }, isTypeSearch),
     ];
 }
@@ -5215,9 +5227,12 @@ async function showResults(docSearch, results, goToFirst, filterCrates) {
     resultsElem.id = "results";
 
     search.innerHTML = "";
-    for (const [tab, output] of tabs) {
+    for (const [tabNb, [tab, output]] of tabs.entries()) {
         tabsElem.appendChild(tab);
+        const isCurrentTab = window.searchState.currentTab === tabNb;
         const placeholder = document.createElement("div");
+        placeholder.className = isCurrentTab ? "search-results active" : "search-results";
+        placeholder.innerHTML = "Loading...";
         output.then(output => {
             if (placeholder.parentElement) {
                 placeholder.parentElement.replaceChild(output, placeholder);
@@ -5474,11 +5489,6 @@ if (ROOT_PATH === null) {
 const database = await Stringdex.loadDatabase(hooks);
 if (typeof window !== "undefined") {
     docSearch = new DocSearch(ROOT_PATH, database);
-    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) {

tests/rustdoc-gui/search-throbber.goml

@@ -0,0 +1,23 @@
+// We are intentionally triggering errors for race-free throbber test
+fail-on-request-error: false
+fail-on-js-error: false
+
+// First, make sure the throbber goes away when done
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search="
+wait-for: ".search-input"
+wait-for-false: ".search-form.loading"
+write-into: (".search-input", "test")
+press-key: 'Enter'
+wait-for-false: ".search-form.loading"
+
+// Make sure the throbber shows up if we prevent the search from
+// ever finishing (this tactic is needed to make sure we don't get stuck
+// with any race conditions).
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search="
+block-network-request: "*/desc/*.js"
+reload:
+wait-for: ".search-input"
+wait-for-false: ".search-form.loading"
+write-into: (".search-input", "test")
+press-key: 'Enter'
+wait-for: ".search-form.loading"