Make changes to page on no results

I want to show a minimal page on an empty query or on a query yielding no results. I am building on the codepen here.

For the empty query, I used the logic described here to look at the request:

const searchClient = {
  ...algoliaClient,
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      $(".left-panel").css('display','none');
      $(".pagination").css('display','none');
      $("#hits").css('display','none');
    } else {
      $(".left-panel").css('display','block');
      $(".pagination").css('display','block');
      $("#hits").css('display','block');
    }
    return algoliaClient.search(requests);
  },
};

In the case of no results, I’m happy to display “No results” in the hits container, but I want to get rid of the empty facet containers (unlike in the codepen).

How can I detect a “no results” response and make changes elsewhere on the page?

Well, I found a hacky solution based on the refinementList widget.

There must be a better way but for now, this works:

instantsearch.widgets.refinementList({
    container: '#org-list',
    attribute: 'Organization',
    transformItems(items) {
      if (items.length > 0) {
        $('.left-panel').css('display','block');
      } else {
        // do something else
        $('.left-panel').css('display','none');
      }
      return items;
    },
  })