Load More

Anatomy

The "Load More" pattern consists of three main components: a summary, a list of items, and a button to load more items.

Summary of items displayed and total available

• Keeps users informed of progress through the list
• Use the "Showing X of Y items" format to clearly and concisely communicate the current state of the list
• Add the role="status" attribute to ensure accessibility for screen readers, providing real-time updates

<p role="status">Showing 10 of 100 flights</p>

List of items that have been loaded

• Use role="list" on the container element.
• Add role="listitem" to announce individual items to screen readers

<div role="list">
  <div role="listitem">Destination 1</div>
  <div role="listitem">Destination 2</div>
  <div role="listitem">Destination 3</div>
</div>

Button to load more items

• Place the button at the bottom-left of the list
• Button text should clearly explain the action, e.g., "View 10 more hotels."
• Use the secondary variant of ba-button

Interaction

When the "Load More" button is clicked:

1. Load and append the next set of items to the list
2. Move focus to the first newly loaded item:

• Set tabindex to 0.
• Use the focus() method to programmatically move focus

3. Once all items are loaded, hide the "Load More" button

Loading states

Preloading: Avoid Loading Delays

Preloading improves responsiveness by loading the next set of items before the user requests them

1. Fetch items in advance and hide them until the user clicks the "Load More" button
2. Display preloaded items instantly when requested.
3. Continue preloading the next set after each button click

Skeleton loading

Use ba-loading-skeleton to display placeholders for items during brief loading delays. This provides visual feedback and improves the perceived loading speed

Loading indicator on ba-button

Use this option sparingly, as it offers less immediate feedback compared to preloading or skeleton loading.

Add the loading attribute to the ba-button to show a loading indicator

Navigation

Ensure users return to the same scroll position when navigating back to the list from another page.:

1. Save the scroll position and state of the list before leaving the page using the History API
2. Restore the list and the scroll position when the user returns

// Save scroll position
window.addEventListener('beforeunload', () => {
  history.replaceState({ scrollY: window.scrollY }, '');
});

// Restore scroll position
window.addEventListener('load', () => {
  if (history.state && history.state.scrollY) {
    window.scrollTo(0, history.state.scrollY);
  }
});