Filip/matrix-spec
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-spec synced 2026-04-04 02:04:10 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Load main results in pages of 3

Browse source 
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
This commit is contained in:
Johannes Marbach 2026-03-24 15:48:57 +01:00
parent 4f0eba6355
commit e3ca1ba2b8
1 changed files with 62 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
assets/js/offline-search.js
View file

@ -116,16 +116,7 @@ search backend.
$html.append($searchResultBody);
// Append a spinner while we're busy.
const $spinner = $("<div>")
.addClass("spinner-container")
.append($("<div>")
.addClass("spinner-border")
.attr("role", "status")
.append($("<div>")
.addClass("visually-hidden")
.text("Loading...")))
.append($("<p>")
.text("Loading..."));
const $spinner = createSpinner();
$searchResultBody.append($spinner)
// Display the popover.
@ -152,18 +143,7 @@ search backend.
$("<p>").text(`No results found for query "${searchQuery}"`)
);
} else {
for (const [index, result] of search.results.entries()) {
// Insert a container for the result *before* the spinner. This
// will push down the spinner as new content is loaded and keep
// it at the end of the popover.
const $container = $("<div>");
$spinner.before($container);
renderResult(await result.data(), index, $container);
}
// Remove the spinner now that everything was loaded.
$spinner.remove();
await loadAndRenderResults(search.results, 0, $spinner, $searchResultBody);
}
};
});
@ -180,6 +160,62 @@ const disposePopover = ($targetSearchInput) => {
}
}
const createSpinner = () => {
return $("<div>")
.addClass("spinner-container")
.append($("<div>")
.addClass("spinner-border")
.attr("role", "status")
.append($("<div>")
.addClass("visually-hidden")
.text("Loading...")))
.append($("<p>")
.text("Loading..."));
}
const loadAndRenderResults = async (results, offset, $spinner, $searchResultBody) => {
// Load and render the first three results and hide the remainder behind a
// button to not freeze the browser by loading results that may not be
// displayed.
const LIMIT = 3;
for (const [index, result] of results.entries()) {
if (index < LIMIT) {
// Insert a container for the result *before* the spinner. This
// will push down the spinner as new content is loaded and keep
// it at the end of the popover.
const $container = $("<div>");
$spinner.before($container);
renderResult(await result.data(), index + offset, $container);
} else if (index === LIMIT) {
const num_hidden_results = results.length - index;
const $loader = $("<button>")
.attr("type", "button")
.addClass("td-offline-search-results__expander-button")
.addClass("btn")
.addClass("btn-sm")
.addClass("btn-link")
.text(`Load more results from ${num_hidden_results} other ${pagesString(num_hidden_results)}`)
.on("click", async () => {
// Remove the button.
$loader.remove();
// Add a spinner while we're busy.
const $spinner = createSpinner();
$searchResultBody.append($spinner)
// Load and render the results.
await loadAndRenderResults(results.slice(LIMIT), LIMIT + offset, $spinner, $searchResultBody);
});
$spinner.before($loader)
}
}
// Remove the spinner now that everything was loaded.
$spinner.remove();
}
const renderResult = (data, index, $container) => {
// Add the main result's page title.
$container.append($("<div>")
@ -248,3 +284,7 @@ const renderResult = (data, index, $container) => {
const resultsString = (n) => {
return n === 1 ? "result" : "results";
};
const pagesString = (n) => {
return n === 1 ? "page" : "pages";
};