Hiding a button after click - TALL Stack Tips

TALL Stack Tips

Search…

TALL Stack Tips

What is TALL Stack

Tailwind

Tailwind Resources

Swinging Bell Notification Icon

Alpine

Alpine Resources

Tabbed Content Using Alpine JS

Checkbox component with SVG tick

Dropdown animation

Laravel

Tabler Icons Component

Password-less Login with Laravel 8

Password-less Login with Magic Link in Laravel 8

Laravel Resources

Laravel 8 Conditional Login Redirect

Simplify Laravel CRUD Controllers

CSRF and expired login forms

CSRF and expired logout forms

Specify a different mail theme for Notifications

Using a mutator to save currency

Using Spatie Valuestore to hold frequently accessed settings

Using the old() helper

Alternatives to using Eloquent Accessor

UpdateOrCreate may not update timestamp

Use of lockForUpdate()

Super Simple User Based Feature Flags

Installing a Specific Version of Laravel

Versioning your Laravel Project

CSS Cache Busting with your Git Commit SHA

Adding column to Database Notifications table

Find nearby locations using the Haversine formula in Eloquent query

Using Queues on Shared Hosting with Laravel

PHP DateTime formatting cribsheet

Livewire

Livewire Resources

Naming Livewire Components

Dynamic Cascading Dropdown with Livewire

Hiding a button after click

Working with Javascript Components

SweetAlert2 with Livewire

Clearing checkboxes in Livewire

Livewire File Uploads Using S3

Simple Log File Viewer

Related Resources

Testing resources

When Composer runs out of memory

Scheduler & Cron tips

Cpanel resources

Powered By GitBook

Hiding a button after click

Livewire can handle loading states in the browser to provide responsive feedback

You can hide a button, and reveal alternate text or spinner when the button is clicked
1
<button wire:loading.remove wire:target="send" wire:click="send" class="px-4 mt-2">Send Message</button>
2
<span wire:loading wire:target="send" class="inline-block px-4 my-3 font-bold text-red-700">Sending</span>
Copied!
When the button is pressed, the wire:loading.remove will immediately hide the button until the request is complete. The target is itself.  At the same time the span is revealed with the same wire:loading and wire:target directives. Once the request is complete, the two elements are swapped back.
Use this for long requests (such as sending an email) to prevent multiple requests from the user impatiently pressing the button.

Livewire - Previous

Dynamic Cascading Dropdown with Livewire

Next - Livewire

Working with Javascript Components

Last modified 1yr ago

Copy link