Lazy load statuses

app/Filament/Resources/NodeResource.php

@@ -88,10 +88,8 @@ class NodeResource extends Resource
                     ->hidden(),
                 Tables\Columns\IconColumn::make('health')
                     ->alignCenter()
-                    ->state(fn (Node $node) => $node->systemInformation()['version'] ?? false)
-                    ->tooltip(fn (Node $node) => $node->systemInformation()['version'] ?? $node->systemInformation()['exception'] ?? 'Not Connected')
-                    ->trueIcon('heroicon-m-heart')
-                    ->default(false),
+                    ->state(fn (Node $node) => $node)
+                    ->view('livewire.columns.version-column'),
                 Tables\Columns\TextColumn::make('name')
                     ->searchable(),
                 Tables\Columns\TextColumn::make('fqdn')

app/Livewire/NodeSystemInformation.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Node;
+use Livewire\Component;
+
+class NodeSystemInformation extends Component
+{
+    public Node $node;
+    public string $sizeClasses;
+
+    public function render()
+    {
+        return view('livewire.node-system-information');
+    }
+
+    public function placeholder()
+    {
+        return <<<'HTML'
+        <div>
+            <x-filament::icon
+                :icon="'heroicon-o-clock'"
+                @class(['fi-ta-icon-item', $sizeClasses, 'fi-color-custom text-custom-500 dark:text-custom-400', 'fi-color-warning'])
+                @style([\Filament\Support\get_color_css_variables('warning', shades: [400, 500], alias: 'tables::columns.icon-column.item')])
+            />
+        </div>
+        HTML;
+    }
+}

resources/views/livewire/columns/version-column.blade.php

@@ -0,0 +1,31 @@
+@php
+    use Filament\Tables\Columns\IconColumn\IconColumnSize;
+
+    $node = $getState();
+    $size = $getSize($state) ?? IconColumnSize::Large;
+
+    $sizeClasses = match ($size) {
+        IconColumnSize::ExtraSmall, 'xs' => 'fi-ta-icon-item-size-xs h-3 w-3',
+        IconColumnSize::Small, 'sm' => 'fi-ta-icon-item-size-sm h-4 w-4',
+        IconColumnSize::Medium, 'md' => 'fi-ta-icon-item-size-md h-5 w-5',
+        IconColumnSize::Large, 'lg' => 'fi-ta-icon-item-size-lg h-6 w-6',
+        IconColumnSize::ExtraLarge, 'xl' => 'fi-ta-icon-item-size-xl h-7 w-7',
+        IconColumnSize::TwoExtraLarge, IconColumnSize::ExtraExtraLarge, '2xl' => 'fi-ta-icon-item-size-2xl h-8 w-8',
+        default => $size,
+    }
+@endphp
+
+<div
+    {{
+        $attributes
+            ->merge($getExtraAttributes(), escape: false)
+            ->class([
+                'fi-ta-icon flex gap-1.5',
+                'flex-wrap' => $canWrap(),
+                'px-3 py-4' => ! $isInline(),
+                'flex-col' => $isListWithLineBreaks(),
+            ])
+    }}
+>
+    @livewire('node-system-information', ['node' => $node, 'lazy' => true, 'sizeClasses' => $sizeClasses])
+</div>

resources/views/livewire/node-system-information.blade.php

@@ -0,0 +1,17 @@
+<div>
+    @switch($node->systemInformation()['version'] ?? 'false')
+        @case('false')
+            <x-filament::icon
+                :icon="'heroicon-o-x-circle'"
+                @class(['fi-ta-icon-item', $sizeClasses, 'fi-color-custom text-custom-500 dark:text-custom-400', 'fi-color-danger'])
+                @style([\Filament\Support\get_color_css_variables('danger', shades: [400, 500], alias: 'tables::columns.icon-column.item') => true])
+            />
+            @break
+        @default
+            <x-filament::icon
+                :icon="'heroicon-o-heart'"
+                @class(['fi-ta-icon-item', $sizeClasses, 'fi-color-custom text-custom-500 dark:text-custom-400', 'fi-color-success' => true])
+                @style([\Filament\Support\get_color_css_variables('success', shades: [400, 500], alias: 'tables::columns.icon-column.item') => true])
+            />
+    @endswitch
+</div>