How do you differentiate between no hits return vs loading (fetching from network) state?

[landermedia]

Using useInfiniteHits return you hits but it can sometimes return empty result depending on the current search query or even data in your indice.

Our UI as of the moment sees no difference between fetching from network state vs no results state from response. We'd like to show proper loading indicators when the hook is currently fetching from network and only show really something else for empty results returned. How do we go about this?

EDIT: This is also true for other hooks like useHierarchicalMenu, useRefinementList, etc.

[Haroenv]

useSearchBox (only for now) has a stalled search boolean you can use as an indicator that will be marked as "stalled" after 200ms of unresolved network activity. You can use it like this:

function Loader() {
  const { isSearchStalled } = useSearchBox({}, { $$widgetType: "custom.loadingIndicator" });

  if (isSearchStalled) {
    return "search loading…";
  }
  return null
}

[landermedia]

@Haroenv thanks for the prompt response. I've tried this but I can't get isSearchStalled to transition from true to false. Not sure what I'm missing, hmm. 🤔

[Haroenv]

Stalled is by default defined as 200ms of network inactivity, so you can lower your network speed to see it more obvious

[dhayab]

Hi, you can now leverage useInstantSearch() to retrieve the status of your search implementation.

[NicolasGorga]

Hello @dhayab i am seeing that the status is idle a lot, before actually passing to loading and idle again with results. Since i am checking that if the status is idle and items.length <= 0 to show a "No results text", this is popping up, then showing the actual results which is not desirable. Am i missing something?

[Haroenv]

do you have a reproduction for this? please open an issue with clear instructions on how to see it happening :)