I have a Livewire component that uploads a video to YouTube in chunks. While uploading, I want to update the progress bar on the frontend by dispatching Livewire events for each chunk uploaded. However, the issue is that all the dispatched events are received only at the end of the function execution, instead of being received in real-time as the upload progresses. Why is this happening, and how can I fix it?

Here’s a simplified example of my current implementation. The Component (YoutubeVideoUploader.php):

class YoutubeVideoUploader extends Component
{
    public function uploadVideo()
    {
        for($i = 0; $i < 10; $i++) {
            $this->videoUploadProgress = $i;
            $this->dispatch('uploadProgress', ['progress' => $i]);
            Log::info("uploadProgress: " . $i . "%"); // this works well 
            sleep(1);
        }
    }
}

Blade Template (youtube-video-uploader.blade.php):

<form id="videoUploadForm" wire:submit.prevent="uploadVideo">
    <!-- some fields here and a submit button -->
</form>

<script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('uploadProgress', event => {
            const progress = event[0]?.progress ?? 0;
            // init hours, minutes, seconds..
            console.log(`[${hours}:${minutes}:${seconds}] uploadProgress event:`, progress);
        });
    });
</script>