React-instantsearch: connectInfiniteHits does not provide loading prop to its component

[Shahzayb]

function InfiniteIdeaHits({ hits, hasMore, refineNext, ...props }: InfiniteHitsProvided<IdeaHit>) {

  const infiniteRef = useInfiniteScroll<HTMLDivElement>({
    // from where I can access the loading prop?
    loading: true,
    hasNextPage: hasMore,
    onLoadMore() {
      refineNext()
    },
  });

  return (
    <div ref={infiniteRef}>
      {hits.map((hit) => (
        <SearchIdeaLink key={hit.id} idea={hit} />
      ))}
      {loading && <div>loading...</div>}
    </div>
  );
}

export default connectInfiniteHits(InfiniteIdeaHits);

I want to show a loading indicator, but I don't know how can I access query loading property.

[Shahzayb]

Never mind, solved it.

function InfiniteIdeaHits({
  hits,
  hasMore,
  refineNext,
  isSearchStalled,
  searching,
  error,
  searchResults,
  ...props
}: InfiniteHitsProvided<IdeaHit> & StateResultsProvided<IdeaHit>) {
  const classes = useGutterAllChild({
    spacing: 2,
  });

  const loading = isSearchStalled || searching;
  const hasResults = searchResults && searchResults.nbHits !== 0;

  const infiniteRef = useInfiniteScroll<HTMLDivElement>({
    loading: loading,
    hasNextPage: hasMore,
    onLoadMore() {
      refineNext();
    },
  });

  return (
    <div ref={infiniteRef} className={classes.gutterAllChild}>
      {hits.map((hit) => (
        <SearchIdeaLink key={hit.id} idea={hit} />
      ))}
      {loading && <SearchIdeaLinkSkeleton />}
      {!loading && error && <CustomError title="Search is failed" />}
      {!loading && !error && !hasResults && <CustomError title="No result found" />}
    </div>
  );
}

export default connectInfiniteHits(connectStateResults(InfiniteIdeaHits));