Load main results in pages of 3

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

assets/js/offline-search.js

@@ -65,15 +65,10 @@ search backend.
       // Dispose any existing popover.
       //
 
-      {
+      disposePopover($targetSearchInput);
-        let popover = bootstrap.Popover.getInstance($targetSearchInput[0]);
-        if (popover !== null) {
-          popover.dispose();
-        }
-      }
 
       //
-      // Kick off the search and collect the results.
+      // Check if we need to do a search at all.
       //
 
       const searchQuery = $targetSearchInput.val();
@@ -81,37 +76,8 @@ search backend.
         return;
       }
 
-      // Show the results popover with 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 popover = new bootstrap.Popover($targetSearchInput[0], {
-        content: $spinner[0],
-        html: true,
-        customClass: "td-offline-search-results",
-        placement: "bottom",
-      });
-      popover.show();
-
-      // Kick off the search.
-      const search = await pagefind.debouncedSearch(searchQuery);
-      if (search === null) {
-        // A more recent search call has been made, nothing to do.
-        return;
-      }
-
-      // Load all result details. We may want to switch to a paged UI in future for better performance.
-      const results = await Promise.all(search.results.slice(0, 100).map(r => r.data()));
-
       //
-      // Construct the search results html.
+      // Prepare the results popover.
       //
 
       const $html = $("<div>");
@@ -135,7 +101,7 @@ search backend.
           .attr("aria-label", "Close")
           .on("click", () => {
             $targetSearchInput.val("");
-            $targetSearchInput.trigger("change");
+            disposePopover($targetSearchInput);
           })
         )
       );
@@ -149,33 +115,129 @@ search backend.
       });
       $html.append($searchResultBody);
 
-      if (results.length === 0) {
+      // Append a spinner while we're busy.
+      const $spinner = createSpinner();
+      $searchResultBody.append($spinner)
+
+      // Display the popover.
+      const popover = new bootstrap.Popover($targetSearchInput[0], {
+        content: $html[0],
+        html: true,
+        customClass: "td-offline-search-results",
+        placement: "bottom",
+      });
+      popover.show();
+
+      //
+      // Kick off the search, load the results and inject them into the popover.
+      //
+
+      const search = await pagefind.debouncedSearch(searchQuery);
+      if (search === null) {
+        // A more recent search call has been made, nothing to do.
+        return;
+      }
+
+      if (search.results.length === 0) {
         $searchResultBody.append(
           $("<p>").text(`No results found for query "${searchQuery}"`)
         );
       } else {
-        results.forEach((r, index_r) => {
+        await loadAndRenderResults(search.results, 0, $spinner, $searchResultBody);
+      }
+    };
+  });
+})(jQuery);
+
+//
+// Helpers
+//
+
+const disposePopover = ($targetSearchInput) => {
+  const popover = bootstrap.Popover.getInstance($targetSearchInput[0]);
+  if (popover !== null) {
+    popover.dispose();
+  }
+}
+
+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.
-          $searchResultBody.append($("<div>")
+  $container.append($("<div>")
     .append($("<a>")
       .css({
         fontSize: "1.2rem",
       })
-              .attr("href", r.url)
+      .attr("href", data.url)
-              .text(r.meta.title))
+      .text(data.meta.title))
     .append($("<span>")
       .addClass("text-body-secondary")
-              .text(` – ${r.sub_results.length} ${resultsString(r.sub_results.length)}`)));
+      .text(` – ${data.sub_results.length} ${resultsString(data.sub_results.length)}`)));
   
   // Render the first 3 subresults per page and wrap the rest
   // in a collapsed container.
   const LIMIT = 3;
   let $wrapper = null;
 
-          r.sub_results.forEach((s, index_s) => {
+  data.sub_results.forEach((s, index_s) => {
     if (index_s === LIMIT) {
-              const num_hidden_results = r.sub_results.length - index_s;
+      const num_hidden_results = data.sub_results.length - index_s;
-              const wrapper_id = `collapsible-subresults-${index_r}`;
+      const wrapper_id = `collapsible-subresults-${index}`;
       const $action = $("<span>").text("▶ Show");
       const $expander = $("<button>")
         .attr("data-bs-toggle", "collapse")
@@ -188,15 +250,15 @@ search backend.
         .addClass("btn-sm")
         .addClass("btn-link")
         .append($action)
-                .append($("<span>").text(` ${num_hidden_results} more ${resultsString(num_hidden_results)} from ${r.meta.title}`));
+        .append($("<span>").text(` ${num_hidden_results} more ${resultsString(num_hidden_results)} from ${data.meta.title}`));
 
-              $searchResultBody.append($("<p>").append($expander));
+      $container.append($("<p>").append($expander));
       $wrapper = $("<div>")
         .addClass("collapse td-offline-search-results__subresults")
         .attr("id", wrapper_id)
         .on("hide.bs.collapse", _ => $action.text("▶ Show"))
         .on("show.bs.collapse", _ => $action.text("▼ Hide"));
-              $searchResultBody.append($wrapper);
+      $container.append($wrapper);
     }
 
     const $entry = $("<div>")
@@ -212,32 +274,17 @@ search backend.
     $entry.append($("<p>").html(s.excerpt));
 
     if (index_s < LIMIT) {
-              $searchResultBody.append($entry);
+      $container.append($entry);
     } else {
       $wrapper.append($entry);
     }
   });
-        });
-      }
-
-      // Finally, show the search results.
-      //
-      // Ideally we would just call setContent but there appears to be a bug in Bootstrap
-      // that causes the popover to be hidden when setContent is called after the popover
-      // has been shown. To work around this, we use the hack from [1] to inject the HTML
-      // content manually.
-      //
-      // [1]: https://github.com/twbs/bootstrap/issues/37206#issuecomment-1259541205
-      $(popover.tip.querySelector('.popover-body')).empty().append($html);
-      popover.update();
 };
-  });
-})(jQuery);
-
-//
-// Helpers
-//
 
 const resultsString = (n) => {
   return n === 1 ? "result" : "results";
 };
+
+const pagesString = (n) => {
+  return n === 1 ? "page" : "pages";
+};