pagination.ts

const state = [{
    id: 1,
    active: false,
    loaded: false,
}, {
    id: 2,
    active: false,
    loaded: false,
}, {
    id: 3,
    active: false,
    loaded: false,
}, {
    id: 4,
    active: false,
    loaded: false,
}, {
    id: 5,
    active: false,
    loaded: false,
}, {
    id: 6,
    active: false,
    loaded: false,
}];

const request = (id) => new Promise((resolve) => {
    setTimeout(() => {
        resolve();
    }, 300);
});

const createPagination = (state, step) => {
    let page = 1;
    let inProcess = false;
    let done = false;

    return {
        next: async () => {
            if (inProcess || done) {
                return;
            }

            inProcess = true;

            for (let i = page * step - step; i < page * step; i++) {
                state[i].active = true;
            }

            for (let i = page * step - step; i < page * step; i++) {
                await request(state[i].id);
                state[i].loaded = true;
            }

            inProcess = false;

            done = state.length / step <= page;

            if (!done) {
                page += 1;
            }

            return {
                done,
                page,
                inProcess,
            };
        }
    };
}

const pagination = createPagination(state, 2);

const onBottomEdge = () => {
    setTimeout(() => {
        pagination.next().then(({done, inProcess}) => {
            if (!done && !inProcess) {
                onBottomEdge();
            }
        });
    }, 500);
};

onBottomEdge();