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)
This commit is contained in:
2026-03-01 05:08:51 -05:00
parent f688779e44
commit 990c24fafe

View File

@@ -820,7 +820,7 @@
</div> </div>
<!-- Network Traffic Sections --> <!-- 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 --> <!-- Initial placeholder; replaced on first successful poll -->
<div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center"> <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> <p class="text-sm text-base/60">Loading live network statistics…</p>
@@ -1643,9 +1643,21 @@
if (!canvas || charts[interfaceId]) return; if (!canvas || charts[interfaceId]) return;
if (typeof Chart === 'undefined') { 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; return;
} }
// Reset retry counter on success
if (createChart._retries) delete createChart._retries[interfaceId];
if (!interfaceData || !interfaceData.history) { if (!interfaceData || !interfaceData.history) {
console.error('No history data available for chart'); console.error('No history data available for chart');