The data on the page is not immediately updated in an application created on electron, how to get around?

Question

JavaScript

There is a small application made with electron. there are 2 files index.js and index.html
in index.js we create a window.
markup in the form of buttons is created in index.html and there is a js code that interacts with them.
I ran into a problem, in the application that opens, we click on the start button, which in turn launches the js code.
The JS code reads the file line by line, after each iteration it creates an element <li>строка из файла</li>in the html structure, but displays all the created elements only after the entire loop has completed.
A should display a string after each iteration. It feels like electron is blocking the output of the html structure when the js code is being executed. Thus, it is not even possible to add a Wait Animation when the js code is executed.
Has anyone come across this issue and can give me some advice on what to do. I will be grateful for any answers and hints.

Answer 1

It's normal webkit work to collect all dom operations together and apply in one go, at the end of the thread of execution (before the event-loop)
Make the read-out loop asynchronous, then everything will be rendered in progress

const fs = require('fs');

function readAndDisplayFile(file, list) {
  var stream = fs.createReadStream(file);
  var buf = '';
  stream.on('readable', () => {
    var data = stream.read();
    if(data === null) {
      return;
    }
    buf += data.toString();
    checkBufLines();
  });
  stream.on('end', () => {
    buf += '\n';
    checkBufLines();
  });
  function checkBufLines() {
    var pos = buf.indexOf('\n');
    if(pos === -1) {
      return;
    }
    var line = buf.substr(0, pos);
    buf = buf.substr(pos + 1);
    var li = document.createElement('li');
    li.innerText = line;
    list.appendChild(li);
    setImmediate(checkBufLines);
  }
}
module.exports.readAndDisplayFile = readAndDisplayFile;

something like this