Magewire Loaders

Magewire loaders connect a component update to the notifier addon. The notification appears when a configured action or property update starts, keeps its loader.active state on while the commit is in flight, and turns it off on success or failure.

This is separate from wire:loading, which changes an element inside the component template, and from the loading indicator, which places a spinner over a slow component. Use wire:loading for local button and form state; use a Magewire loader when the interaction needs a page-level notification.

Configuring action loaders

Declare a protected $loader map on the component. Each key selects an action and each value contains one or more customer-visible messages:

<?php

declare(strict_types=1);

namespace Vendor\Module\Magewire;

use Magewirephp\Magewire\Component;

class Counter extends Component
{
    public int $count = 0;

    protected $loader = [
        'increment' => 'Updating counter…',
    ];

    public function increment(): void
    {
        $this->count++;
    }
}

Loader strings are passed through Magento translation during dehydration. The current action matcher accepts:

Prefer exact action names. A wildcard can generate noisy notifications for internal or incidental calls.

Since Magewire 3.7, a layout block can adjust this map for one placement with the magewire:loader argument, without changing the class. See Layout overrides.

Message sequences

A value may be one string or an array of strings:

protected $loader = [
    'save' => 'Saving ... Saved.',
    'publish' => [
        'Publishing ... Published.',
        'Catalog: Refreshing index',
    ],
];

The loader utility recognizes a small message grammar:

The follow-up part is created only after a successful commit. On failure, the active loader is stopped without showing the success message. Before Magewire 3.7, the ... Saved form showed a "Message Unknown" notification during the request.

The message is split in two cases only:

• it starts with three periods, with or without a following space (...Saved and ... Saved both work);
• it contains three periods with a space on both sides (Saving ... Saved).

Periods inside a sentence, as in Hi... there or Loading..., do not split the message. The Unicode ellipsis character never splits it. A title is separated by a colon followed by a space, and only the first one counts.

Property update loaders

The same map can target updates produced by wire:model.live, $wire.set(), or another property mutation:

protected $loader = [
    'status' => 'Changing {previous_value} to {value}…',
    'status:active' => 'Activating account…',
    'profile.name' => 'Updating profile name to {value}…',
];

Property matching proceeds from the most specific expression to broader forms: an exact property:value pair, a parent/value or final-segment/value pair for nested properties, then the exact property, parent, or final segment.

{value} and {previous_value} are replaced in property messages in the browser. They are notification text only; never treat them as escaped HTML or trusted state.

Fast-request suppression

The browser records recent completion times per component and action in sessionStorage. After at least two samples, it sets the notification's loader.active state to false when the median duration is below 300 ms. The notification can still appear, but without an active loader. This avoids flashing a spinner for interactions that consistently finish almost immediately.

Since Magewire 3.7, core no longer draws a spinner inside notifications. A theme that renders its own indicator in the notifier's notification.after block can read notification.loader.active. For a spinner over the component itself, see Loading Indicator.

Timings are browser-local heuristics, not performance telemetry. Use server profiling and the browser network panel for real measurements.

Custom behavior with hooks

For behavior that cannot be expressed by the map, listen to Magewire's commit hook and call the notifier directly:

document.addEventListener('magewire:init', () => {
    Magewire.hook('commit', ({ commit, succeed, fail }) => {
        const updatesCounter = commit.calls.some(({ method }) => method === 'increment')

        if (! updatesCounter) {
            return
        }

        succeed(() => window.MagewireAddons.notifier.create('Counter updated'))
        fail(() => window.MagewireAddons.notifier.create('Counter update failed', {
            type: 'error',
        }))
    })
}, { once: true })

The notifier addon is registered by Magewire's default layout. If a theme or compatibility module removes that addon, the loader feature has no notification surface. See Magewire Notifier and the Loader Utility for the underlying JavaScript APIs.