Wire:loading element not hiding

#1 
                <button class="btn btn-primary btn-sm"  wire:click="updateDateModifier(1)"
                        >Next Day</button>
                <button class="btn btn-primary btn-sm"  wire:click="updateDateModifier(5)"
                        >5 Days</button>
                <button class="btn btn-primary btn-sm"  wire:click="updateDateModifier(10)"
                        >10 Days</button>

            <div wire:loading>Loading</div>

Not sure why, but the element with wire:loading doesn’t hide when I click one of the buttons.

If I add wire:loading.attr=“disabled” to all the buttons, they all disable while loading as they should.

#2

Are you saying that the element with wire:loading never hides? Or once you click a button, the “Loading” text shows up and then doesn’t hide itself after the loading has supposedly completed?

Without context as to what your buttons are doing, it’s difficult to see where the problem lies. Are there any other javascript errors you’re getting? If something breaks in the process, it might cascade and prevent further javascript execution.

#3

I’m having a similar problem, I think. I’ve followed the documentation for file uploads and when I started putting in my loading indicator and trying to hide the submit button, the wire:loading and wire:loading.remove do not work. The loading indicator is present before uploading a file (and never changes). After clicking the save button, it does not remove itself.

Here’s my Livewire class:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class ProfilePhoto extends Component
{
    use WithFileUploads;

    /**
     * @var null|\Livewire\TemporaryUploadedFile
     */
    public $photo;

    public function updatedPhoto()
    {
        $this->validate([
            'photo' => 'image',
        ]);
    }

    public function save()
    {
        $this->photo->storePublicly('profiles', 'public');
    }

    public function render()
    {
        return view('livewire.profile-photo');
    }
}

And my component:

<form wire:submit.prevent="save" class="flex flex-col">
    @if($photo)
            <img src="{{ $photo->temporaryUrl() }}" alt="Preview" class="self-center max-h-128 object-scale-down">
    @endif
    <div class="mt-auto flex justify-between items-center">
        <label class="cursor-pointer" style="margin-bottom: 0;">
            <i class="fas fa-fw fa-camera fa-2x" title="select picture"></i>
            <input x-ref="fileInput" wire:model="photo" type="file" class="hidden">
        </label>
        <div wire:loading.remove wire:target="photo, save">
            <button type="submit">
                <i class="fas fa-fw fa-cloud-upload" title="save picture"></i>
            </button>
        </div>
        <div wire:loading wire:target="photo, save">
            <i class="fas fa-fw fa-spinner fa-pulse" title="uploading..."></i>
        </div>
    </div>
</form>

No matter what I’ve put in the wire:target (save, photo, or as above both), the loading indicator and submit button are not behaving correctly.

#4

Figured it out. Had my @livewireStyles in the wrong location.

#5

Aha! Thanks for that… I wasn’t even loading the styles. :man_facepalming: