Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Infinite scroll

Infinite scroll allows a user to efficiently load and scroll through a large set of content.

Status: Planned

Anatomy

  1. Progress indicator
  2. Text

Behavior

Loading

Auto (Default)

Auto loading displays a progress indicator and then loads additional results when the user reaches the top or bottom of the containing component.

Manual

Manual loading displays a progress indicator and then loads additional results when the user clicks a button.

Silent

Silent loading is similar to auto loading in that additional results are loaded when the user reaches a defined threshold of the containing component. However, no progress indicator is displayed so as to create a more seamless experience.

End of data

A message can be displayed at the end of the list to convey to the user that there is no more data to load. Text that is longer than the width of the container will wrap to the next line.