
Global Loading Indicator
- Published: 09 Apr 2024 Updated: 04 May 2024
provide a loading indicator for long running operations

Why?
Certain operations in Filament may experience prolonged loading times, for example when applying filters to a table. The following code snippet introduces a renderhook to the footer, coupled with an Alpine listener to display a loading message.
Ensure to set the timeout to a sufficiently high value to prevent the message from appearing unnecessarily for small requests.
1$panel
2 ->renderHook(
3 'panels::footer',
4 fn (): View => view('zeus-tartarus::hooks.footer'),
5 )
1<div
2 x-cloak
3 x-show="$store.isLoading.value"
4 class="fixed max-sm:bottom-4 sm:top-4 left-1/2 -translate-x-1/2 z-[6000001]"
5>
6 <div
7 class="flex gap-2"
8 >
9 <div class="text-sm hidden sm:block">
10 Processing
11 </div>
12 <x-filament::loading-indicator class="h-5 w-5"/>
13 </div>
14 <script>
15 document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
16 value: false,
17 delayTimer: null,
18 set(value) {
19 clearTimeout(this.delayTimer);
20 if (value === false) this.value = false;
21 else this.delayTimer = setTimeout(() => this.value = true, 2000);
22 }
23 }))
24 document.addEventListener("livewire:init", () => {
25 Livewire.hook('commit.prepare', () => Alpine.store('isLoading').set(true))
26 Livewire.hook('commit', ({succeed}) => succeed(() => queueMicrotask(() => Alpine.store('isLoading').set(false))))
27 })
28 </script>
29</div>

Related Tricks:
add any link or actions to the topbar
add locale parameter to all of your filament panel
How to Apply Authorization on Create Option Action for Select Field
let users select a color for the panel
make all Field or any components translatable