Loaders & jquery not working in the livewire pagination

my code is working correctly in the first page, but when I navigate to the second page the loading icons and the jQuery effects not working correctly when I submitting a form.
It’s insert the data without showing the loading icon.

my view

 <x-livewire.form.buttons.save type="submit" title="{{ __('buttons.save') }}" wire:target="form_data.{{ $user->id }}.file" wire:loading.attr="disabled">
                                        <div wire:target="save({{ $user->id }})" wire:loading.remove>
                                            {{ __('buttons.save') }}
                                        </div>

                                        <div wire:target="save({{ $user->id }})" wire:loading>
                                            <i class="fa-solid fa-spinner fa-spin"></i>
                                        </div>
                                    </x-livewire.form.buttons.save>

php

public $page;
public $name = '';
public $badge_number = '';


public $form_data = [];
public $permission_type = [];

protected $queryString = [
    'page',
    'name',
    'badge_number',
];

public function updatingName()
{
    $this->resetPage();
}

public function updatingBadgeNumber(){

    $this->resetPage();
}

public function render()
{
    $name = $this->name;
    $badge_number = $this->badge_number;

    if($name === '' && $badge_number === '')
    {
        $users = User::orderBy('name')
        ->paginate(15);
    }
    else
    {
        $users = User::where('name', 'like', '%' . $name . '%')
        ->where('badge_number', 'like', $badge_number . '%')
        ->orderBy('name')
        ->paginate(15);
    }

    return view('livewire.attendances.daily', [
        'users' => $users,
        'page' => $this->getPage()
    ]);
}