From 46b56fdbaaa337b4ff727feca82b60fb1997aa0d Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Thu, 28 Aug 2025 17:37:19 +0000
Subject: [PATCH] fix: improve configuration loading reliability and UX

- Added retry logic for failed node loading with automatic 3-second retry
- Added loading indicator while configuration is being fetched
- Prevents showing empty configuration during initial load
- Better handles transient network or rate limit errors

This further addresses #372 by ensuring configuration data loads properly
even when there are temporary issues like rate limiting or network hiccups.
---
 .../src/components/Settings/Settings.tsx      | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index 1861b644c..2c98268d4 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -95,6 +95,7 @@ const Settings: Component = () => {
   const [currentNodeType, setCurrentNodeType] = createSignal<'pve' | 'pbs'>('pve');
   const [modalResetKey, setModalResetKey] = createSignal(0);
   const [showPasswordModal, setShowPasswordModal] = createSignal(false);
+  const [initialLoadComplete, setInitialLoadComplete] = createSignal(false);
   
   // System settings
   // PBS polling interval removed - fixed at 10 seconds
@@ -193,6 +194,11 @@ const Settings: Component = () => {
       setNodes(nodesWithStatus);
     } catch (error) {
       console.error('Failed to load nodes:', error);
+      // If we get a 429 or network error, retry after a delay
+      if (error instanceof Error && (error.message.includes('429') || error.message.includes('fetch'))) {
+        console.log('Retrying node load after delay...');
+        setTimeout(() => loadNodes(), 3000);
+      }
     }
   };
   
@@ -408,6 +414,9 @@ const Settings: Component = () => {
       }
     } catch (error) {
       console.error('Failed to load configuration:', error);
+    } finally {
+      // Mark initial load as complete even if there were errors
+      setInitialLoadComplete(true);
     }
   });
 
@@ -774,6 +783,12 @@ const Settings: Component = () => {
           {/* PVE Nodes Tab */}
           <Show when={activeTab() === 'pve'}>
             <div class="space-y-4">
+              <Show when={!initialLoadComplete()}>
+                <div class="flex items-center justify-center py-8">
+                  <span class="text-gray-500">Loading configuration...</span>
+                </div>
+              </Show>
+              <Show when={initialLoadComplete()}>
               <div class="flex items-center justify-between mb-4">
                 <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Proxmox VE Nodes</h3>
                 <div class="flex gap-2 items-center">
@@ -1030,12 +1045,19 @@ const Settings: Component = () => {
                 </For>
                 </Show>
               </div>
+              </Show>
             </div>
           </Show>
           
           {/* PBS Nodes Tab */}
           <Show when={activeTab() === 'pbs'}>
             <div class="space-y-4">
+              <Show when={!initialLoadComplete()}>
+                <div class="flex items-center justify-center py-8">
+                  <span class="text-gray-500">Loading configuration...</span>
+                </div>
+              </Show>
+              <Show when={initialLoadComplete()}>
               <div class="flex items-center justify-between mb-4">
                 <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Proxmox Backup Server Nodes</h3>
                 <div class="flex gap-2 items-center">
@@ -1254,6 +1276,7 @@ const Settings: Component = () => {
                 </For>
                 </Show>
               </div>
+              </Show>
             </div>
           </Show>