@entangle not working

#1

Hi, @entangle does not seem to work.
Version : Alpine 2.8 and Livewire 2.3

The image show on click but never disappear with $this->showLoading = false;

Here my blade code:

<div x-data="{ loading: @entangle('showLoading') }" class="d-flex">
        <div>
            <button @click="loading = true" wire:click="import()" class="btn btn-primary mt-3">Lancer</button>
        </div>
        <div x-show="loading">
                <img src="https://www.popvox.fr/app/static/media/loading.2f27f045.gif" width="100" alt="">
        </div>
    </div>

Here my Livewire class:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Prestashop extends Component
{

    public $showLoading = false;
  
    public function import() 
    {
            $this->showLoading = false;
    }
}
#2

Still have this problem… Anybody help ?

#3

What I think might be happening is that the call to import() and the logic that entangles showLoading are firing at the same time. I’m unsure what takes priority (if anything) but my hunch is that showLoading is being set after import() is fired. Since there’s no load on your import() method, it finishes quickly and sets showLoading to false - then entaglement is done and showLoading is set to true because you’ve set it with @click.

If you can add a load to import() - even something as simple as sleep(1), it’ll help determine if my hunch is correct.

Typically you wouldn’t experience this because you’d be doing some things within your import() method that would take time to process.

#4

Hi, thanks for taking the time.

My import() function take about 30 sec to load

My actual code is:

public function import() 
    {
        if ($this->manufacturer != 0) 
            $ecom = new Ecom();
            $ecom->create_products_csv($this->manufacturer);
            $this->showLoading = false;
            return Storage::disk('public')->download('export.csv');
    }
#5

Actually, I just noticed in your blade component that you’re using directives on the top-most element. This can cause issues on diffing. I’m setting up a test component to mirror your code but can you verify that you have a root element that doesn’t have any livewire/blade stuff in it? You can just wrap everything in a <div>.

#6

Okay, I set things up as you have and am experiencing the exact same thing you are. I’m not sure why yet, though. The data comes back proper: showLoading is coming back from the server as false but isn’t being entangled with loading.

I’ll try to look into it because I think entaglement is a really cool idea but I haven’t messed with it too much.

For your use, you might just want to do wire:loading. This will prevent you from having to worry about flags to set the load status.

component.blade.php

<div class="d-flex">
    <div>
        <button wire:click="import()" class="btn btn-primary mt-3">Lancer</button>
    </div>
    <div wire:loading>
        <img src="https://www.popvox.fr/app/static/media/loading.2f27f045.gif" width="100" alt="">
    </div>
</div>

And in your Component.php, you can remove all traces of showLoading.

#7

I looked into the GitHub issues and found several relating to entangle. It seems like they’re aware of issues and there are some work-arounds but they feel wonky. For this specific purpose, I’d go with wire:loading as it’s cleaner and doesn’t require you to manage any states or flags.

Still, it doesn’t help if you’re actually trying to use entangle. It feels like the error is happening on round trip/rectifying the dom because if you delay the wire:click by calling it inline with @click using setTimeout(() => { $wire.import()}, 500), it works as expected.

1 Like
#8

Many thanks for the tips on wire:loading it do the job and cleaner.

For this kind of pattern I will use wire:loading in the future but for other purpose I hope that entangle will be fix soon…