async function fetchDataInChunks(url) {
    let response = await fetch(url);
    let data = await response.json();
    return data.data;
}

async function displayDataInChunks(initialChunkSize, subsequentChunkSize) {
    let data = await fetchDataInChunks('/variable_names');
    let index = 0;

    function displayNextChunk(chunkSize) {
        let chunk = data.slice(index, index + chunkSize);
        document.getElementById('variable-names').innerText += chunk.join('\n') + '\n';
        index += chunkSize;
    }

    function checkScrollPosition() {
        var preElement = document.getElementById("variable-names");
        var scrollTop = preElement.scrollTop;
        var scrollHeight = preElement.scrollHeight;
        var clientHeight = preElement.clientHeight;

        if (scrollTop + clientHeight >= scrollHeight) {
            displayNextChunk(subsequentChunkSize);
        }
    }        
    displayNextChunk(initialChunkSize);        
    var preElement = document.getElementById("variable-names");
    preElement.addEventListener("scroll", checkScrollPosition);
}        
displayDataInChunks(40, 10);