Best Practices

Components

Use Pagination when a list can have more than 25 results. Infinite scroll is not recommended in any scenario.

Considering left-to-right interfaces:

Pagination should always be in the top right of a container.
If the list has a vertical scroll, the Pagination should also be in the bottom right.
Use the Data View component to correctly position the Pagination.

The standard is to show 25 items per page of a list.
When the list is inside a container where vertical scroll should be avoided, such as a Modal or a Card, limit the number of items accordingly.
In a Data View, merchants can select the number of results to be shown per page in the footer Pagination. They can choose among 10, 25, 50, and 100 results.

Show a loading Pagination when the list is loading, since the number of results is not loaded and the user can’t navigate between pages yet.

Update the number of results when the merchant edits the filter values or the search query, the total number of results should inform the current state of the list.
Only load new items when the merchant explicitly triggers an action to update the results, such as the Refresh button in the web browser.
When the user has just created an item and returns to the listing page, they should go to the first page with updated results.
When the user has just edited an item and returns to the listing page, they should see a list with the same items as before, but with the edited item updated.
Don’t load new items while the merchant is navigating between pages.

The complete search query, which includes the filters, the current page, and the search terms, should be reflected in the URL. This allows the merchant to easily return to the customized view and easily share it.
Don’t use local storage or cookies to store the query.