Infinite Scroll

We load a repeater with a limited amount of data. The data is retrieved from a database collection and includes flag images from an open source endpoint (countryflag.io). When a specific repeater item in the current batch of items comes into view, we add additional items to the repeater.

Database Collection

We created a collection named Countries with the following fields: 

• Country name: displayed in the repeater

• Country code: used with an open source endpoint (countryflags.io) to get the country flag images for displaying in the repeater.

Page Elements

We added a repeater to our site. Each item in the repeater contains the following elements:

• 2 text elements: for the country name and the index of the country.

• Image: displays the country flag retrieved from countryflags.io based on the country code.

Backend Code

The web module countries-data.jsw includes one function, getSomeCountries(), which takes 2 arguments: limit and skip. 

Each time this function is called, we query some more data from the collection. The number of records we query is equal to the limit argument. In our frontend code we keep track of how many times we have called this function (skip), so we’ll know from which point we need to continue querying. In order to find the point we need to start querying from, we multiply limit by skip.

Page Code

We defined 2 constants:

• DEFAULT_LIMIT: the number of records we want to get during each call.

• START_LOADING_NEXT: after how many items in the current batch of displayed items should we call the loading of the next batch of items.

In our example we set the DEFAULT_LIMIT to 15 and START_LOADING_NEXT to 10.

We also defined 2 variables:

• skip: the number of executions we’ve already performed.

• finishLoad: a boolean stating whether we already loaded all the records from the collection into the repeater.

When the page loads we immediately perform the first call, meaning we query the first 15 records from the collection and load them into the repeater.

Then we set an onViewPortEnter() event to trigger when the 10th item in the repeater comes into view. In other words, each time the site visitor scrolls down and reaches the 10th item from the current batch of items, we call getSomeCountries() to get the next batch.