atomic-load-more-results

The atomic-load-more-results component allows the user to load additional results if more are available.

Introduction

This component allows a user to load more results when they reach the bottom of a page, assuming there are more results. This approach offers a smoother and more intuitive browsing experience, as there’s no “page reload”.

User Experience and Best Practices

Usage Notes

  • The Load More Results component is especially useful when you want your user to browse more results, rather than return to and refine facets or reconsider their query.

  • When the items in a source are highly specific, a pager is a more appropriate component.

Guidelines

Users browse longer than with Load more than with Pagination. Load more is less effective when the items in a source are very specific and require comparison.

Use Cases and Examples

In a commerce site, users will view more products using a Load More button then with a Pager. When considering designing for mobile, a Load More button is a better experience for the user.

Shadow Parts

Part Description

container

The container of the component.

highlight

The highlighted number of results displayed and number of results available.

load-more-results-button

The "Load more results" button.

progress-bar

The progress bar displaying a percentage of results shown over the total number of results available.

ripple

The ripple effect of the component’s interactive elements.

showing-results

The summary displaying which results are shown and how many are available.

CSS Custom Content

Name Description

--atomic-more-results-progress-bar-color-from

Color of the start of the gradient for the load more results progress bar.

--atomic-more-results-progress-bar-color-to

Color of the end of the gradient for the load more results progress bar.

What's Next for Me?