Блокировка интерфейса браузера при выполнения кода

Всем доброго дня, моя задача написать не большой проект для отправки видео файлов через websocket размером до 10 гб. Код серверной части написан и работает приемлемо но вот с клиентской частью есть проблема, при выполени функции shareFile интерфейс блокируется, и не возможно вывести statusBar. Вопрос такой как можно организовать выполнения данного процесса в фоном режиме. Клиентская часть пишется на Vue3

    methods:{
    shareFile(metadata, buffer, sock){
        sock.send(JSON.stringify(metadata))
        let state = true;

        while (state) {
            this.statusBar += 0.05;

            let chunk = buffer.slice(0, metadata.buffer_size);
            buffer = buffer.slice(metadata.buffer_size, buffer.length);

            if (chunk.length > 0){
                sock.send(chunk);
            }
            else
                state = false;
        }

    },


    videoUpload(){
        let uploadeVidio = this.$refs.file.files[0];
        let reader = new FileReader();
        
        reader.onload = ()=>{
            let buffer = new Uint8Array(reader.result);
            
            this.shareFile({
                filename: uploadeVidio.name,
                total_buffer_size: buffer.length,
                buffer_size: 123840 //81920
            }, 
            buffer, this.sock);

        }

        reader.readAsArrayBuffer(uploadeVidio)
    },
}

Ответы (0 шт):