Unable to load all content in editor

1

I have around 2,500,000 lines of data fetched from URL and loaded on to editor in chunks. Based on screen size, editor shows up only upto 1,600,000 odd lines, the remaining number of lines cannot be scrolled because scroll bar hits bottom of the page.

Following is the code snippet of my editor.

const editor = CodeMirror.fromTextArea(log_area_textarea, {
            lineNumbers: true,
            readOnly: true,
            value: "",
            scrollbarStyle: "auto",
            lineWrapping: true,
            search: true,
            highlightSelectionMatches: true,
            showToken: true,
            showMatchesOnScrollbar: true
        });

        const CHUNK_SIZE = 1024 * 1024; // 1 MB
        fetch(fetch_url)
        .then((response) => response.arrayBuffer())
        .then((arrayBuffer) => {
            let i = 0;
            let text = "";

            const loadChunk = () => {
                const chunk = arrayBuffer.slice(i, i + CHUNK_SIZE);
                i += CHUNK_SIZE;

                if (chunk.byteLength === 0) {
                editor.setValue(text);
                return;
                }

                const decoder = new TextDecoder();
                const chunkText = decoder.decode(chunk);
                editor.replaceRange(chunkText, CodeMirror.Pos(editor.lastLine()));
                text += chunkText;

                setTimeout(loadChunk, 0);
            };

            loadChunk();
        });

        editor.setSize("100%", window.innerHeight-100+"px");
2

Web browser layout starts glitching out at a certain size because CSS dimension computations use some fixed-precision number system that can overflow. CodeMirror 6 might do better on this.