render UI without waiting for full index load

stereobooster · Mar 26, 2024 · e1df74a · e1df74a
1 parent 9d45351
commit e1df74a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 71 deletions.
diff --git a/packages/demo/src/search.ts b/packages/demo/src/search.ts
@@ -25,10 +25,7 @@ import { schema } from "./schema.js";
 import { getSearchClient } from "@stereobooster/pagefind-instantsearch";
 
 // @ts-expect-error
-// import * as pagefind from "../public/pagefind/pagefind.js";
-const pagefind = await import("../public/pagefind/pagefind.js");
-pagefind.init();
-await pagefind.filters();
+const pagefind = import("../public/pagefind/pagefind.js");
 
 const searchClient = getSearchClient(pagefind, schema);
 const search = instantsearch({

diff --git a/packages/pagefind-instantsearch/src/index.ts b/packages/pagefind-instantsearch/src/index.ts
@@ -14,48 +14,57 @@ import { adaptHit, adaptFacets } from "./adaptResponse";
 import { adaptRequest } from "./adaptRequest";
 
 export function getSearchClient<S extends Schema>(
-  index: any,
+  clientPromise: Promise<any>,
   schema: S
 ): SearchClient {
+  const indexPromise = clientPromise.then(async (pagefind) => {
+    pagefind.init();
+    await pagefind.filters();
+    return pagefind;
+  });
+
   return {
     search: <TObject>(
       requests: readonly MultipleQueriesQuery[]
     ): Readonly<Promise<MultipleQueriesResponse<TObject>>> =>
-      Promise.all(
-        requests.map(async (request) => {
-          const response = await index.search(
-            // https://github.com/CloudCannon/pagefind/issues/546#issuecomment-1896570871
-            request.params?.query?.trim() || null,
-            adaptRequest(request)
-          );
+      indexPromise.then(
+        (index) =>
+          Promise.all(
+            requests.map(async (request) => {
+              const response = await index.search(
+                // https://github.com/CloudCannon/pagefind/issues/546#issuecomment-1896570871
+                request.params?.query?.trim() || null,
+                adaptRequest(request)
+              );
 
-          const page = request.params?.page || 0;
-          const hitsPerPage = request.params?.hitsPerPage || 16;
-          const hits = await Promise.all(
-            response.results
-              .slice(page * hitsPerPage, (page + 1) * hitsPerPage)
-              .map(adaptHit)
-          );
-          const nbHits = response.results.length;
-          const facets = !request.params?.query
-            ? await index.filters()
-            : response.filters;
-          const maxValuesPerFacet = request.params?.maxValuesPerFacet || 10;
+              const page = request.params?.page || 0;
+              const hitsPerPage = request.params?.hitsPerPage || 16;
+              const hits = await Promise.all(
+                response.results
+                  .slice(page * hitsPerPage, (page + 1) * hitsPerPage)
+                  .map(adaptHit)
+              );
+              const nbHits = response.results.length;
+              const facets = !request.params?.query
+                ? await index.filters()
+                : response.filters;
+              const maxValuesPerFacet = request.params?.maxValuesPerFacet || 10;
 
-          return {
-            hits,
-            page,
-            hitsPerPage,
-            nbHits,
-            nbPages: Math.ceil(nbHits / hitsPerPage),
-            ...adaptFacets(facets, maxValuesPerFacet, schema),
-            processingTimeMS: response.timings.total,
-            query: request.params?.query,
-            exhaustiveNbHits: true,
-            params: "",
-          };
-        })
-      ).then((results) => ({ results })) as any,
+              return {
+                hits,
+                page,
+                hitsPerPage,
+                nbHits,
+                nbPages: Math.ceil(nbHits / hitsPerPage),
+                ...adaptFacets(facets, maxValuesPerFacet, schema),
+                processingTimeMS: response.timings.total,
+                query: request.params?.query,
+                exhaustiveNbHits: true,
+                params: "",
+              };
+            })
+          ).then((results) => ({ results })) as any
+      ),
 
     searchForFacetValues: (
       requests: ReadonlyArray<{
@@ -64,41 +73,44 @@ export function getSearchClient<S extends Schema>(
       }>
     ): Readonly<Promise<readonly SearchForFacetValuesResponse[]>> => {
       // This is quite primitive implementation. Better would be to use TrieMap
-      return Promise.all(
-        requests.map(async (request) => {
-          const response = await index.search(
-            request.params?.query,
-            adaptRequest(request)
-          );
+      return indexPromise.then((index) =>
+        Promise.all(
+          requests.map(async (request) => {
+            const response = await index.search(
+              request.params?.query,
+              adaptRequest(request)
+            );
 
-          const facets = !request.params?.query
-            ? await index.filters()
-            : response.filters;
+            const facets = !request.params?.query
+              ? await index.filters()
+              : response.filters;
 
-          return {
-            exhaustiveFacetsCount: true,
-            facetHits: Object.entries(facets[request.params.facetName])
-              .filter(
-                ([value, count]: [string, any]) =>
-                  value
-                    .toLocaleLowerCase()
-                    .startsWith(request.params.facetQuery) && count > 0
-              )
-              .sort((a: [string, any], b: [string, any]) => b[1] - a[1])
-              .slice(
-                0,
-                request.params.maxFacetHits || request.params.maxValuesPerFacet
-              )
-              .map(
-                ([value, count]) =>
-                  ({
-                    value,
-                    count,
-                    highlighted: value,
-                  } as FacetHit)
-              ),
-          };
-        })
+            return {
+              exhaustiveFacetsCount: true,
+              facetHits: Object.entries(facets[request.params.facetName])
+                .filter(
+                  ([value, count]: [string, any]) =>
+                    value
+                      .toLocaleLowerCase()
+                      .startsWith(request.params.facetQuery) && count > 0
+                )
+                .sort((a: [string, any], b: [string, any]) => b[1] - a[1])
+                .slice(
+                  0,
+                  request.params.maxFacetHits ||
+                    request.params.maxValuesPerFacet
+                )
+                .map(
+                  ([value, count]) =>
+                    ({
+                      value,
+                      count,
+                      highlighted: value,
+                    } as FacetHit)
+                ),
+            };
+          })
+        )
       );
     },
   };