Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Show progress animation for dynamic table data loading with Livewire

I’m using Livewire on a Laravel 11 app to dynamically load table contents. It all works well but I would like to display an indication or animation from the moment the user clicks the pagination link to the moment the information is displayed – for example, I have seen some sites where the table rows are shaded grey with a progress animation.

Can someone point me in the right direction to be able to achieve something like that with Laravel/ Livewire?

TIA

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Accepting the suggestion from brombeer in the comments to my question as it is the right thing to look at for what I was looking for.

    Documentation is here: https://livewire.laravel.com/docs/wire-loading


  2. 0

    From Livewire v3 documentation, you would use wire:loading.

    From the above documentation:

    Basic Usage

    Livewire provides a simple yet extremely powerful syntax for controlling loading indicators: wire:loading. Adding wire:loading to any element will hide it by default (using display: none in CSS) and show it when a request is sent to the server.

    Below is a basic example of a CreatePost component’s form with wire:loading being used to toggle a loading message:

    <form wire:submit="save">
    <!-- ... -->
 
    <button type="submit">Save</button>
 
    <div wire:loading> 
        Saving post...
    </div>
</form>

    When a user presses "Save", the "Saving post…" message will appear below the button while the "save" action is being executed. The message will disappear when the response is received from the server and processed by Livewire.

    Removing elements

    Alternatively, you can append .remove for the inverse effect, showing an element by default and hiding it during requests to the server:

    <div wire:loading.remove>...</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search