Hide default results in custom SeachBox

Show & Tell
, , ,
1

Hi,

I’m using React InstantSearch Hooks with a custom SearchBox and I can’t get the default results to disappear. I’m initiating refine on component load:

const { refine } = useSearchBox(props);

I’m also using a NoResultsBoundary:

const NoResultsBoundary = ({ children, fallback }) => {
    const { results, status } = useInstantSearch();
    ...
}

I’ve set it up like this in the render:

<NoResultsBoundary fallback={<NoResults />}>
    <Hits
        hitComponent={Hit}
        transformItems={removeEmptyHits}
    />
</NoResultsBoundary>

Hit just shows a custom anchor
transformItems removes some unwanted results

Now, my problem is that when everything is loaded, it shows some search results out of the box. I also see a XHR request happening. Also, when I start typing (and refining the result), before the new results that match my query are shown, I see a flash of the default results. I would like to hide these default results.

Can anyone help me achieve this? This seems like a common feature someone would want, but please let me know if you need more information.

Thanks!

2

Hi @yoni1

NoResults is for just that – when a user performs a search and there are no matching results returned.

You want to suppress results for empty queries. That’s documented here:

You need a conditional to check if the query is empty in the UI state and act accordingly.
Note that if you do wish to suppress the results, we recommend replacing them with an initial state with query suggestions or popular items to give users something with to engage with immediately.

3

Hi @chuck.meyer and thanks for your reply!

I’ve come a bit further now, using <EmptyQueryBoundary>. The default results are gone when there’s no query. It’s still not entirely how I would like things to work though.

This is what I have now:

<EmptyQueryBoundary fallback={null}>
    <NoResultsBoundary fallback={<NoResults />}>
        <Hits
            hitComponent={Hit}
            transformItems={removeEmptyHits}
        />
    </NoResultsBoundary>
</EmptyQueryBoundary>

There’s 1 problem left. The default results are still flashing when I’m simulating e.g. slow 3G and typing a new search phrase. Is there any solution for that? Intercepting (hiding) these?

Thanks for your suggestion of popular items by the way. I was thinking of making this a setting. I will implement this!

1 Like
4

Hmmm… we’ve gone beyond my front end knowledge here, I’ve reached out to our internal front end experts to see if they have any tips about avoiding flashing in the UI.

1 Like
5

Hi @yoni1,

One of our front end devs tried to reproduce this flashing issue and could not.

Do you have a codesandbox or equivalent you could share to help you with troubleshooting?

If it helps, here’s the one she made when she was trying to recreate your issue: bold-firefly-0lkw0d - CodeSandbox

6

Hi @chuck.meyer, thanks again for your answer and thanks for the sandbox. I could actually reproduce it using the sandbox from your front-end developer.

As you can see at the end of the video at roughly 0:16, it happens. When searching for ‘c’: first, there is ‘Amazon’, ‘Google’, ‘Dell’ and a few frames later there’s ‘Dell’, ‘Apple’, ‘LG’. After this moment in the video, it keeps happening for other search terms.

Now, this video was recorded with a fast internet connection. It may not be noticeable for everyone, but it still ‘flickers’ with default results.

To demonstrate it in full detail, I’ve also captures a video using a slow 3G connection. I only started typing after everything was properly loaded and all connections were idle.

It’s kind of hard to explain what I see through text. I think these videos, using your developers sandbox, explain it perfectly.

I really hope I can remove this ‘default results flicker’ and am curious as to what you guys come up with!

EDIT: Re-uploaded the videos to WeTransfer due to expiry: videos

7

Hi @chuck.meyer, could you maybe look into this? The WeTransfer links expired so I re-ploaded them: videos

8

Hey @yoni1

Thanks for re-uploading. Things slowed down around here during the holidays. Let me re-connect with the engineer internally and see if they have any further suggestions.

1 Like
9

Hi @chuck.meyer. Any news?

10

Hey @yoni1

Just checked back in the internal system and didn’t see a response. I added another comment, but you may have more luck reaching out to the devs directly by cutting an issue on GitHub