syofyanzuhad / filament-connection-indicator

v1.0.0 2026-09-12 11:35 UTC

Requires

• php: ^8.2
• filament/filament: ^5.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.0
• nunomaduro/collision: ^8.0
• orchestra/testbench: ^9.0|^10.0|^11.0
• pestphp/pest: ^3.7|^4.0
• pestphp/pest-plugin-arch: ^3.0|^4.0
• pestphp/pest-plugin-laravel: ^3.0|^4.0
• rector/rector: ^2.0
• spatie/laravel-ray: ^1.26

MIT

• Syofyan Zuhad

• laravel
• filament
• filament-plugin
• filamentphp
• syofyanzuhad
• connection-indicator

Published on Packagist.org on 2026-09-12 11:37 UTC

README

A zero-dependency, client-side Filament plugin that renders a real-time pulsing signal dot in your Filament panel (defaulting before the user menu). It uses the browser's native Network Information API and navigator.onLine to reflect connection quality without any WebSocket polling or server round-trips.

Signal States

Status	Color	Condition
checking	Gray #9ca3af	Initial check / rechecking
online	Green #22c55e	Online, effectiveType = 4g (or API unsupported)
moderate	Yellow #eab308	effectiveType = 3g
slow	Orange #f97316	effectiveType = 2g / slow-2g
offline	Red #ef4444	navigator.onLine === false

Installation

You can install the package via composer:

composer require syofyanzuhad/filament-connection-indicator

You can publish the config file with:

php artisan vendor:publish --tag="connection-indicator-config"

Optionally, you can publish the views using:

php artisan vendor:publish --tag="connection-indicator-views"

Usage

Register the plugin in your Filament Panel Provider (e.g. AdminPanelProvider.php):

use Syofyanzuhad\ConnectionIndicator\ConnectionIndicatorPlugin;
use Filament\View\PanelsRenderHook;

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->plugins([
            ConnectionIndicatorPlugin::make(),
        ]);
}

UI Styles

The indicator supports two visual styles:

• dot (default) — Pulsing circular dot with smooth ping animation.

• bars — 4-tier vertical signal bars (cellular / Wi-Fi style) that fill dynamically based on connection quality, and shows an offline strike line when disconnected.

You can set the style fluently on the plugin:

// Use vertical signal bars
ConnectionIndicatorPlugin::make()
    ->bars() // or ->style('bars')

// Or explicitly use the pulsing dot
ConnectionIndicatorPlugin::make()
    ->dot() // or ->style('dot')

Custom Render Hook

By default, the indicator is rendered before the user menu (PanelsRenderHook::USER_MENU_BEFORE). You can customize where it appears:

ConnectionIndicatorPlugin::make()
    ->renderHook(PanelsRenderHook::TOPBAR_END)

Configuration

This is the contents of the published config file (config/connection-indicator.php):

return [
    /*
    |--------------------------------------------------------------------------
    | Indicator UI Style
    |--------------------------------------------------------------------------
    | Supported options: 'dot', 'bars'
    | Default: 'dot'
    */
    'style' => 'dot',

    /*
    |--------------------------------------------------------------------------
    | Tooltip Labels
    |--------------------------------------------------------------------------
    */
    'labels' => [
        'checking' => 'Checking...',
        'online'   => 'Online',
        'moderate' => 'Slow Connection',
        'slow'     => 'Very Slow',
        'offline'  => 'Offline',
    ],

    /*
    |--------------------------------------------------------------------------
    | Poll Interval (ms)
    |--------------------------------------------------------------------------
    | How often the client re-checks the connection in the background.
    | Default: 30 000 ms (30 s).
    */
    'poll_interval' => 30000,
];

Browser Compatibility

API	Availability	Fallback
navigator.onLine	All modern browsers	—
navigator.connection (Network Information API)	Chrome / Edge / Android WebView	Gracefully falls back to online status
navigator.connection.effectiveType	Chrome 61+, not Safari / Firefox	Falls back to online if missing
navigator.connection.rtt	Chrome 61+, not Safari / Firefox	Omitted from tooltip if null

The component degrades gracefully: on Safari and Firefox, it still tracks online and offline events in real-time even without network speed metrics.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Syofyan Zuhad
• All Contributors

License

The MIT License (MIT). Please see License File for more information.