Filament Connection Indicator Laravel Package

Getting Started

Install the package with Composer, then register the plugin in the relevant Filament panel provider. Check the package README first for the exact plugin FQCN, render hook names, and config keys, since v1.0.0 is the initial release.

Minimal flow:

use Vendor\FilamentConnectionIndicator\ConnectionIndicatorPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            ConnectionIndicatorPlugin::make()
                ->dot()
                ->renderHook('panels::topbar.end')
        );
}

First useful use case: add a subtle connection dot to the topbar so admin users notice when their browser goes offline before submitting forms or saving resources. Use ->bars() where you want a more visible signal-strength style indicator.

Implementation Patterns

• Global panel status indicator: Register the plugin once per panel. Choose ->dot() for compact layouts or ->bars() for dashboards where connection quality should be more prominent.
• Fluent style selection: Prefer the shortcuts ->dot() / ->bars() for readability, or use ->style('dot') / ->style('bars') if you centralize style configuration.
• Render hook placement: Use ->renderHook(...) to place the indicator in the topbar, header, footer, or user menu. Confirm exact Filament hook constants/strings in the README and keep placement consistent across panels.
• Multi-panel apps: Register separately per panel with different styles and hooks. For example, use a dot in a lightweight operations panel and bars in a field-service or dispatch panel.
• Tooltip labels and polling: Configure tooltip text and polling intervals through the documented fluent API or published config. Use human-readable labels such as “Online”, “Offline”, “Weak connection” rather than raw browser states.
• UX cue, not enforcement: Use the indicator to warn users before they submit work, but keep server-side validation and failure handling in place. The package reports client-side connectivity; it does not make form submissions reliable by itself.
• Pair with real request failures: Since this is zero-dependency and client-side only, combine it with Filament’s normal validation, notifications, and retry behavior for actual backend/API failures.

Gotchas and Tips

• Browser support varies: The Network Information API is not uniformly supported across browsers. Treat connection type/effective speed as a hint, not a guarantee. navigator.onLine can also report “online” on captive portals or broken LANs.
• It does not detect server outages: If the browser has network access but your Laravel app, database, or API is down, the indicator may still show online. Use server health checks or request failure handling for backend status.
• Avoid aggressive polling: Polling intervals affect battery and CPU on mobile devices. Use the least frequent interval that still feels responsive, and rely on browser online/offline events where possible.
• Run Filament asset/cache commands after install or upgrade: If the indicator does not appear after registering the plugin, clear caches and run Filament’s asset publishing command as appropriate for your Filament version.
• Check render hook names: Filament hook identifiers differ by version and panel layout. If the indicator renders in an unexpected place, verify the hook string/constant against the package docs and your Filament version.
• Localize tooltip labels: If your admin panel is multilingual, configure translatable tooltip labels rather than hard-coding English text.
• Test offline states deliberately: Use browser DevTools “Offline” mode, throttling, and mobile device emulation. Also test captive-portal-like cases where the browser is online but requests fail.
• Use as a UX signal only: Do not use the connection indicator for authorization, data integrity, or business rules. It is a client-side convenience indicator, not a security or monitoring system.