Connection Indicator

• Signal States
• Installation
• Usage
  • UI Styles
  • Custom Render Hook
• Configuration
• Browser Compatibility
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

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

#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

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.