How to control on loading state when hits are 0 at the begging - angular instant search

I m tryin to find a way to control the loading state on hits and filters on angular instantsearch

i saw there is “searchStalled” feature that exists only on searchbox while searching

but my issue is that on my hits component i see 0 hits before the hits really rendered
so there is no state that say “finished to load hits”

i would like to show component with “no result” if hits is 0

 <div>
 ... for of state.hits 


// this will see first for a second and then it will be dissaperad 
<div *ngIf="state && state.hits.length === 0"></div>
<div/>

and whats really happen is rapiddly whilr page load or when filtering i first see the “0” hits component and then will see my hits

i see that there is a stateResult component in react
how can i achieve smth like that ?

thanks

It looks like there is a status attribute in the InstantSearchInstance we can use to detect if a refinement is occurring. This status can be either of these values normally: ‘idle’, ‘loading’, or ‘stalled’.

For the stalled attribute to be more generous, you may need to configure the stalledSearchDelay option for the InstantSearch instance and decrease it. By default it is 200ms, you can find more information here. We also have a guide on handling slow network performance here in our documentation.

Example:

export class AppComponent {
  config = {
    // ...
    stalledSearchDelay: 100,
  }
}

To access this parameter, you could pass a reference up/down to components using a ViewChild:

<app-test-component [searchStatus]="this.instantSearch.instantSearchInstance.status"></app-test-component>
<ais-instantsearch [config]="config" #instantSearch>
  ...

Then in your component where you are displaying the hits, you can pass this status to it and conditionally display a loading animation/spinner or show the results if it is no longer loading.

@Input('searchStatus') searchStatus: string = 'loading';

<div *ngIf="searchStatus !== 'idle'">
  (Loading Spinner)
</div>

I tested this locally by throttling my network connection and this parameter does get set during filters, initial loading, and when typing in the search box:

image

Happy to help further, let us know, thanks!

1 Like