2

I am working on a Gridsome application (SSG built with Vue). I added a search page and I've implemented the Algolia instant search with the autocomplete widget.

Gridsome by default lazy loads routes and renders the pages on the server-side, and since the instant search component I'm using does not support SSR, I wrapped it in a <ClientOnly> component.

The problem

When I navigate to /search it takes a while before I the components are rendered, this is because immediately I navigate to the page, the script to fetch the content is executed which blocks the rendering until it is finished. causing a bad UX.

The code

 <div class="search-page-container">
      <div class="search-field-container">
        <h2><label for="search-field">Search</label></h2>

        <ClientOnly>
          <ais-instant-search :search-client="searchClient" :index-name="INDEX_NAME">
            <ais-autocomplete>
              <div slot-scope="{ currentRefinement, indices, refine }">
                <input id="search-field" type="search" :value="currentRefinement" placeholder="what topic are you looking for?" @input="refine($event.currentTarget.value)" autocomplete="off" />
                <div v-if="currentRefinement">
                  <h4>Articles</h4>
                  <div class="hits">
                    <ul v-for="index in indices" :key="index.label">
                    <li v-show="index.hits.length == 0"><em>No matches...</em></li>
                    <li>
                      <ul>
                        <li v-for="hit in index.hits" :key="hit.objectID">
                          <div>
                            <g-link :to="hit.slug"><ais-highlight attribute="title" :hit="hit"/></g-link>
                            <br>
                            <small class="post-description"><ais-highlight attribute="description" :hit="hit"/></small>
                            <!-- <hr> -->
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  </div>
                </div>
                <div class="space-top" v-else> <p> Type in the box to search for articles.. </p></div>
              </div>
            </ais-autocomplete>
          </ais-instant-search>
        </ClientOnly>

      </div>

What I want

I want the queries to be made only when the user starts typing, that way, it doesn't block the rendering.

Edmund1645
  • 309
  • 1
  • 2
  • 13
  • Is it possible to use the `routing` option to synchronize the state of the `ais-instant-search` component to the URL that you're on? that should achieve the results you're looking for – Ohgodwhy Jan 09 '20 at 22:36
  • 1
    @Ohgodwhy I don't think that'll do, from what I saw, it has to do with a search function. I did as I saw [here](https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/#widget-param-search-function) on the docs but I still get issues, as the nothing shows again on the page. – Edmund1645 Jan 09 '20 at 23:02

0 Answers0