Infinite Scrolling

Overview

When your application retrieves data, the amount of data retrieved is either bounded — meaning you have at least a rough idea how much data is coming back — or the amount of data retrieved is unbounded.

When the amount of data is unbounded, it’s best to retrieve the data in discrete chunks. Retrieving data can be costly in terms of server, network, and client resources. Since you won’t know which parts of the unbounded data the user is interested in (beyond any search parameters provided), it’s best not to attempt to retrieve all of the data at once.

After your app has retrieved one or more discrete chunks of data, you can use an infinite scrolling approach to display more data using an additive process, where the previous data is retained in the view and additional data is automatically retrieved and displayed at the bottom whenever the user scrolls to the bottom of the view.

Development

Web component development

Implementation

Any function view in your application can handle a special event that helps you implement infinite scrolling.

First, in the function view element, bind the trackScrolling property to a value of true. This lets the function view know that you’re interested in tracking when the user scrolls to the bottom of the view.

<rui-function-view titleText="Large Datasets" [trackScrolling]="true">

Next, add an event handler for the function view’s rui-scrolled-to-bottom event. If you’ve set trackScrolling to true, this event fires when the user scrolls to the bottom of the view.

<rui-function-view titleText="Large Datasets" [trackScrolling]="true" (rui-scrolled-to-bottom)="scrolledToBottom()">

Your event handler for the rui-scrolled-to-bottom event should attempt to add more data to the view.

scrolledToBottom() {
    this.addMoreEmployees();
}

Angular wrapper development

Implementation

You’ll subscribe to receive messages that help you implement infinite scrolling. Here are the steps for developing this.

In the view that needs to implement infinite scrolling, subscribe to the JHA pub/sub service using the “takeWhile” method as shown:

ngOnInit(): void {
    this.subscription = this.pubSubService.Stream.takeWhile(() => this.alive).subscribe(pubSubMessage => this.processMessage(pubSubMessage));
}

After subscribing to the pub/sub service, send a ‘TRACKSCROLL’ pub/sub message with a payload of true. This tells the infinite scrolling mechanism that you want to start receiving ‘SCROLLED’ messages when the user scrolls to the bottom of the view.

this.pubSubService.Stream.next(new JhaPubSubMessage('TRACKSCROLL', true));

Your pub/sub message event handler should process the “SCROLLED” pub/sub message, adding more data to the view on each ‘SCROLLED’ message. This message is only sent when the user scrolls to the bottom of the page, not when the user scrolls up.

processMessage(pubSubMessage: JhaPubSubMessage) {
    if (pubSubMessage.message == 'SCROLLED')
        this.addMoreMoreDataToView();
}

If you need to dynamically turn off infinite scrolling in the view for any reason, send a ‘TRACKSCROLL’ pub/sub message with a payload of false. This tells the infinite scrolling mechanism to stop sending ‘SCROLLED’ messages when the user scrolls to the bottom of the view.

this.pubSubService.Stream.next(new JhaPubSubMessage('TRACKSCROLL', false));

Design

Figma design

There are no specific design elements related to infinite scrolling.

Adobe XD design

There are no specific design elements related to infinite scrolling.