atomic-load-more-results (Deprecated)
atomic-load-more-results (Deprecated)
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
On an ecommerce 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 |
|---|---|
|
The container of the component. |
|
The highlighted number of results displayed and number of results available. |
|
The "Load more results" button. |
|
The progress bar displaying a percentage of results shown over the total number of results available. |
|
The summary displaying which results are shown and how many are available. |
CSS Custom Content
| Name | Description |
|---|---|
|
Color of the start of the gradient for the load more results progress bar. |
|
Color of the end of the gradient for the load more results progress bar. |