How to create a method query that works for an Infinite Scroll loading behavior

I'm creating a page that outputs a list of 1000-3000 records. The current flow is:

1. User loads a page
2. jQuery hits the server for all the records and injects them into the page.

Problem here is that those records for some users can take 3+ seconds to return which is a horrible UX.

What I would like to do is the following: 1. User loads a page 2. jQuery hits the server and gets at most 100 records. Then keeps hitting the server in a loop until the records loaded equal the max records.

Idea here is the user gets to see records quickly and doesn't think something broke.

So it's not really an infinite scroll as I don't care about the scroll position but it seems like a similar flow.

How in jQuery can I the the server in a loop? And how in rails can I query taking into account a offset and limit?

Thank you

You can simply query the server for a batch of data over and over again.

There are numerous APIs you can implement. Like:

client: GET request /url/
server: {
    data: [ ... ]
    rest: resturl
}
client GET request resturl
repeat.

Or you can get the client to pass in parameters saying you want resource 1-100, then 101-200 and do this in a loop.

All the while you will render the data as it comes in.

Your server either needs to let you pass in parameters saying you want record i to i + n.

Or your server needs to get all the data. Store it somewhere then return a chunk of the data along with some kind unique id or url to request another chunk of data and repeat this.

// pseudo jquery code
function next(data) {
    render(data.records);
    $.when(getData(data.uniqueId)).then(next);
}

function getData(id) {
    return $.ajax({
        type: "GET",
        url: ...
        data {
            // when id is undefined get server to load all data
            // when id is defined get server to send subset of data stored @ id.
            id: id
        },
        ...
    });
}

$.when(getData()).then(next);