I am currently using the following code to allow the user to upload their CAD model into the threejs canvas.

<input type="file" id="file-to-upload" onchange="readFile(this);">

window.readFile = function readFile(input) {
        let file = input.files[0];
        const reader = new FileReader();
        reader.addEventListener( 'load', async function ( event ) {

            const manager = new THREE.LoadingManager();
            const loader = new ThreeMFLoader( manager );

            object= loader.parse( event.target.result );
            scene.add(object);
            manager.onLoad = function () {
                render();
            };

            renderer.render(scene, currentCamera)
        }, false );
        reader.readAsArrayBuffer( file );
    }
}

However, the larger the files, the longer it takes for the model to be displayed in the scene. I don’t have any problem with longer load times, but sometimes it brings up the following pop up message:

The user then has to click “Wait” and the model will finally load after some time. In addition, during the waiting period for the model to load into the scene, the browser appears to be frozen, i.e. user can’t rotate camera around in scene or click any buttons.

I have been trying to remove the “wait” pop up message and prevent the browser from appearing to be frozen by including a progress bar using the code that I found here. However, the progress bar just goes from 0% directly to 100% once the model is in the scene so I think the progress bar is also frozen during the time it takes for the model to be uploaded. How can I remove the "wait" pop up message and show the user that the model is being uploaded in the progress bar?