Livewire Button with Loading Indicator

Overview

This document provides implementation instructions for a Laravel Livewire component called ButtonWithLoadingSpinner. This component generates a button that displays a loading spinner when clicked, giving a visual indication to the user that the submitted request is being processed.

Installation

The ButtonWithLoadingSpinner component consists of two parts, a PHP class file and a Blade view file. Here's how you can integrate them into your Laravel project:

• Copy the PHP file to your app/Livewire directory. Rename the class file to match the new path if necessary.
• Copy the Blade view file to your resources/views/livewire directory. Update the view path in the render method if necessary.

Integration

To utilize the ButtonWithLoadingSpinner component in your Laravel project, include it in your Blade files as a Livewire component:

@livewire('button-with-loading-spinner')

Usage

The ButtonWithLoadingSpinner component is easy to use. When the button is clicked, it calls the submit method in its Livewire component, causing the button to display a loading spinner.

Configuration and Customization

You can customize the ButtonWithLoadingSpinner component to fit your needs. For instance, you can modify the submit method in the Livewire component to perform different actions when the button is clicked. You can also customize the appearance of the button by editing the Blade view file.

Remember to keep the wire:click="submit" and wire:loading directives in the button tag so that the loading spinner will be displayed when the button is clicked.