feat/search page progress bar

[marcellmueller]

#304

To test this set throttling to 3g in your network tab

I'm wondering if we should use react query isLoading instead of isFetching to prevent this from flashing after the initial page load.

[hamidhabib-buttons]

(nit): This returns an array of arrays because you're mapping over data?.pages first, then again inside for pageData.data. This could cause some rendering issues. I believe it would be better to use flatMap i.e.

{isFetching ? (
  <ProgressBar animated now={100} className="mb-4" />
) : (
  data?.pages
    .flatMap((pageData: PaginatedRecreationResourceDto) =>
      pageData.data.map(
        (recreationResource: RecreationResourceDto) => (
          <RecResourceCard
            key={recreationResource.rec_resource_id}
            recreationResource={recreationResource}
          />
        )
      )
    )
)}

[marcellmueller]

Good shout, I think that is from the react query refactor. I've changed this in my filter pills pr, though instead of mapping two arrays I am just doing this and mapping it once:

const searchResults = data?.pages?.[0].data ?? [];

[hamidhabib-buttons]

Okay great! LGTM than 🚀

[marcellmueller]

Oh just to keep you in the loop I misunderstood how it works with the new pagination, it does return array of pages I have added the flatmap in my new pr as you suggested thanks.

[jimmypalelil]

@hamidhabib-buttons just for my knowledge - could you elaborate on which rendering issues will the 2d array mapping cause?

[hamidhabib-buttons]

Note: isFetching is the correct choice here since we want to show the bar every time the data is fetched.