Instantsearch.js: Hiding the pagination if there is only one page

[pixelastic]

Is your feature request related to a problem? Please describe 🙏
I'd like to hide the pagination when there is only one page of results. In that context, the pagination only adds clutter without meaningful interaction.

Describe the solution you'd like 🤔
Ideally I think a custom way of auto-hiding the container of widgets could be useful. I saw it was discussed already, and I think it might be useful for more than this widget.

Maybe something like autoHideContainer(params), where params are the search result response?

Describe alternatives you've considered ✨

I could listen to the helper.on('result') and hide the pagination wrapper when only one page is returned and display it when several pages are returned. This seems a bit hackish, adding widget-related logic outside of the widget itself.

I also tried to use connectPagination to add the needed branching logic there, but custom connectors are completely independent from the default widgets and there is no way to make them fallback to the default rendering method AFAIK.

I saw an old issue that suggest overwriting the widget .render method with a wrapper function. I'm unsure if this is still doable (the issue is 2+ years old)

ccing @Haroenv @bobylito as we discussed this

[bobylito]

I saw an old issue that suggest overwriting the widget .render method with a wrapper function. I'm unsure if this is still doable (the issue is 2+ years old)

Yes it is still doable. The widgets structure is mostly the same theses days.

[pixelastic]

Thanks,

This behavior is something I'd like to integrate as the default for all TalkSearch integrations. In order to limit the amount of custom code TalkSearch users will need to add to their page, I see two ways:

1. Create my own talksearch.paginationWidget that creates a regular pagination widget but overwrites the .render method with its own wrapper as discussed above.
2. Add the feature directly to instantsearch core. Would that be something you'd be willing to accept in the core (I can work on a PR).

[bobylito]

Hi @pixelastic thanks for your feedback. Your bug actually raised a lot of questions on our side. Since we are working on the new major version of InstantSearch.js, we're exploring a new API that could also contain the ability to change the condition that hides the widgets.

In the mean time, shipping your own widget is probably the most straightforward.

[pixelastic]

Thanks! I'll do that then. Let me know if there's any way I could help you with the new API.

[bobylito]

Linked to #3031

[francoischalifour]

You can now achieve this behavior with the panel widget in InstantSearch.js 3:

const pagination = instantsearch.widgets.panel({
  hidden: ({ results }) => results.nbPages === 1,
})(instantsearch.widgets.pagination);

search.addWidget(
  pagination({
    container: '#pagination',
  })
);

[johnnybboiii]

Is there a way of doing this in react instantsearch?

[Haroenv]

In React InstantSearch you would do this with the connector for now, and choose not to render if there's only one page available

[francoischalifour]

@johnnybboiii In React InstantSearch you can rely on the ais-Pagination-noRefinement CSS class to hide the widget (see example).