inkarnation's avatar

Content doesn't refresh upon method completion

Hi folks, I'm currently working on some import functionality (CSV -> DB). I'm having a Livewire component to cover the multi-step process (Upload File > Map fields > Import). To do so, my Component looks like:

class Import extends Component
{
    use WithFileUploads;

    #[Validate(['csv_file' => 'required|file|mimes:csv,txt|max:102400'])]
    public $csv_file;
   	...
    public int $step = 1;
    public $total_records = 100;
    public $current_record = 0;

My component view looks like:

<div class="max-w-7xl mx-auto">
	@if($step == 1)
	....
	@elseif($step == 2)
	....
	@elseif($step == 3)
	<div class="text-sm font-bold text-indigo-600 text-right">{{ $current_record }} / {{ $total_records }}</div>
    <div class="h-2 rounded-full bg-indigo-600 animate-pulse"
        style="width: {{ $current_record == 0 ? 0 : ($current_record / $total_records * 100)  }}%"></div>
	@endif

Now, within the second step, the operation completes by invoking a method "startImport()". This method looks like:

function startImport()
{
    $recordsIterator = $reader->getRecords();

    iterator_apply($recordsIterator, function (Iterator $iterator) {
        $row = $iterator->current();

        // Fancy Model creation that works

        $this->current_record++;
        return true;
    }, array($recordsIterator));
        
}

I reckon, that the frontend isn't updated until startImport() completes, which hijacks my idea of having some frontend progress bar. I tried varius wire:poll configurations or to switch from an iterator to a foreach array construct - but without success.

You've any idea in how to have the frontend refresh (periodically - no real time update needed) with the current "current_record" status?

Thanks!

0 likes
0 replies

Please or to participate in this conversation.