Hi there! I am trying to read a text file using JavaScript File Reader API, but my DOM gets unresponsive for a moment while loading the content of the file in the DOM (if the file size is large, (say: 5MB)). I have identified the piece of code which is causing this behavior but I need help how can I fix this?

Below is my HTML Code.

Below is my JavaScript Code for handling file upload

Output

Before Uploading text file.

While Uploading the text file, I clicked on the 'Click Me' button but nothing printed on the console. The DOM was unresponsive for a moment. I don't know why it happened.

After the content got embedded in DOM then the 'clicked' message got printed on the console.

I figured that the below line of code is causing this problem, but I don't know the reason, can anybody please explain me this why this line of code blocking the DOM and how can I fix this?