Vue - Hiding search results until search box or facet filters interactions

Hey everyone, I thought I would share how I went about hiding search results until a user has either started typing a query into the search box or filtering on facets.

Firstly to start off sorry if my indentation is a bit off, this is my first post on the forum :smile:

To start with here is my code below on the search results widget

<template>
  <AisStateResults>
    <div slot-scope="{ query, state }">
      <AisInfiniteHits v-if="query.length > 0 ||
      state.disjunctiveFacetsRefinements.FilterCategory"
      >
        <div slot-scope="{ items, refine, isLastPage }">
          <ul v-if="items.length > 0" class="search-results__list">
            <li
            v-for="item in items"
            :key="item.objectID"
            class="search-results__item"
            >
              <SearchResult
               :data="item"
              />
            </li>
          </ul>
          <div v-if="items.length <= 0" class="search-results__placeholder">
             No results found  for the current selection.
          </div>
          <div class="search-results__more">
            <button v-if="!isLastPage" class="button button--no-border" 
            @click="refine">Show more results</button>
           </div>
        </div>
      </AisInfiniteHits>
    </div>
  </AisStateResults>
</template>

<script>
  import {
    AisStateResults,
    AisInfiniteHits,
  } from 'vue-instantsearch';
  import SearchResult from './SearchResult';

  export default {
     name: 'SearchResults',
     components: {
       AisStateResults,
       AisInfiniteHits,
       SearchResult
     }
   };
</script>

I first incorporate the ais-state-results into my search results widget, this is an important widget to use if you are going to get this to work.
In the div below the ais-state-results we set our slot-scope to use the query and state attributes.

The query attribute will allow us to check the length of the search box string and the state will allow us to dig into the facets.

In my example I am using the ais-infinite-hits to display a list of results, you can swap this out for ais-hits or however you want to display your results. In this widget i then create and if statement that checks if the query is empty by using query.length > 0.

In the same if statement i first dig into the state that our slot-scope is using and use the disjunctiveFacetsRefinements - this attribute of the state checks what refinements from your facets are being checked on for filtering.

Then the next attribute that is being selected is the FilteryCategory e.g Genre and that is all you need to check, once you have these in place your results won’t show until a user has interacted with the search or your facet filters.