Progress of add() only showing at the end

Hello, when i add a file using the progress option, the progress doesnt trigger until the entire end of the upload, here is my code:

import { sha256 } from "js-sha256";
import ipfsClient from "ipfs-http-client";
import "regenerator-runtime/runtime";
var buffer = require("buffer");

let ipfs

let progress_func = function(len) {
  console.log("File progress:", len);
};
const addDile = async function(buffer) {
  for await (const result of ipfs.add(buffer, {progress: progress_func, pin: true})) {
    console.log(result);
    console.log("https://ipfs.infura.io/ipfs/" + result.path);
  }
}
function upload() {
  let host = document.getElementById("host").value
  ipfs = ipfsClient({
    host: host,
    port: "5001",
    protocol: "https"
  });
  const reader = new FileReader();
  reader.onloadend = function() {
    const buf = buffer.Buffer(reader.result); // Convert data into buffer
    const files = [
      {
        content: buf
      }
    ];
    console.log(sha256(buf));
    addDile(files);
  };
  const photo = document.getElementById("photo");
  reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
}

document.getElementById("uploadImage").addEventListener("click", upload);

Any idea why? saw a couple of topics about it on github but no answers :confused:

Made a simple online test here:
https://test-ipfs-ph.herokuapp.com/

You can see in the log after click in upload, it display the file sha256 hash then there is nothing untill the file is fully uploaded and all progress log show at the end only.

More discussion here: https://github.com/ipfs/js-ipfs/issues/2854