user0/rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rustdoc-search: put throbber at bottom of search results instead

Browse source
This commit is contained in:
Michael Howell 2025-09-10 11:23:40 -07:00
parent d3c3e25674
commit 2773d24fb7
2 changed files with 68 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/librustdoc/html/static/css/rustdoc.css
View file

@ -339,6 +339,7 @@ summary.hideme,
.scraped-example-list,
.rustdoc-breadcrumbs,
.search-switcher,
.search-throbber,
/* This selector is for the items listed in the "all items" page. */
ul.all-items {
font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
@ -2006,6 +2007,57 @@ a.tooltip:hover::after {
color: transparent;
}
.search-throbber {
position: relative;
height: 34px;
}
.search-throbber::before,
.search-form.loading::before
{
width: 16px;
height: 16px;
border-radius: 16px;
background: radial-gradient(
var(--button-background-color) 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;
right: 9px;
top: 8px;
animation: rotating 1.25s linear infinite;
}
.search-throbber::after,
.search-form.loading::after
{
width: 18px;
height: 18px;
border-radius: 18px;
background: conic-gradient(
var(--button-background-color) 0deg 180deg,
transparent 270deg 360deg
);
content: "";
position: absolute;
right: 8px;
top: 8px;
animation: rotating 0.66s linear infinite;
}
#search .error code {
border-radius: 3px;
background-color: var(--search-error-code-background-color);

19
src/librustdoc/html/static/js/search.js
View file

@ -4904,6 +4904,11 @@ async function addTab(results, query, display, finishedCallback, isTypeSearch) {
let output = document.createElement("ul");
output.className = "search-results " + extraClass;
const throbber = document.createElement("div");
throbber.className = "search-throbber";
throbber.innerHTML = "Loading...";
output.appendChild(throbber);
let count = 0;
/** @type {Promise<string|null>[]} */
@ -5010,7 +5015,7 @@ ${obj.displayPath}<span class="${type}">${name}</span>\
}
link.appendChild(description);
output.appendChild(link);
output.insertBefore(link, throbber);
results.next().then(async nextResult => {
if (nextResult.value) {
@ -5019,7 +5024,10 @@ ${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);
throbber.remove();
});
}
});
};
@ -5215,9 +5223,14 @@ 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-throbber search-results active" :
"search-throbber search-results";
placeholder.innerHTML = "Loading...";
output.then(output => {
if (placeholder.parentElement) {
placeholder.parentElement.replaceChild(output, placeholder);