From 990c24fafebc1709d8c536b1610ba06d9a390b90 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 1 Mar 2026 05:08:51 -0500
Subject: [PATCH] fix: add wire:ignore to network traffic container and
 Chart.js retry logic

Root cause: wire:poll.2s on layout div caused Livewire to morph/overwrite
the JavaScript-rendered network traffic interface cards every 2 seconds,
replacing them with the server-rendered placeholder HTML.

- Add wire:ignore to #network-traffic-container to prevent Livewire DOM
  morphing from destroying dynamically rendered content
- Add retry logic (10x at 300ms) to createChart() for when Chart.js CDN
  hasn't finished loading (e.g. during wire:navigate)
---
 .../Servers/Proxmox/views/overview.blade.php     | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index a98d9ba51..ce3dbfd31 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -820,7 +820,7 @@
                 </div>
 
                 <!-- Network Traffic Sections -->
-                <div id="network-traffic-container" data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
+                <div id="network-traffic-container" wire:ignore data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
                     <!-- Initial placeholder; replaced on first successful poll -->
                     <div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center">
                         <p class="text-sm text-base/60">Loading live network statistics…</p>
@@ -1643,9 +1643,21 @@
                 if (!canvas || charts[interfaceId]) return;
                 
                 if (typeof Chart === 'undefined') {
-                    console.error('Chart.js is not loaded');
+                    // Chart.js may still be loading (async CDN via wire:navigate)
+                    // Retry up to 10 times at 300ms intervals
+                    if (!createChart._retries) createChart._retries = {};
+                    const retryCount = createChart._retries[interfaceId] || 0;
+                    if (retryCount < 10) {
+                        createChart._retries[interfaceId] = retryCount + 1;
+                        setTimeout(() => createChart(interfaceId, interfaceData), 300);
+                    } else {
+                        console.error('Chart.js failed to load after 10 retries');
+                        delete createChart._retries[interfaceId];
+                    }
                     return;
                 }
+                // Reset retry counter on success
+                if (createChart._retries) delete createChart._retries[interfaceId];
                 
                 if (!interfaceData || !interfaceData.history) {
                     console.error('No history data available for chart');