Refactor server error handling in Servers component to improve UI clarity

src/contexts/ServerContext.tsx

@@ -78,45 +78,59 @@ export function ServerProvider({ children }: { children: ReactNode }) {
       }
 
       const data = await response.json()
-      const results: ServerData[] = serverList.map((server, index) => {
-        const a2sData = data.results?.[index]
       
-        if (a2sData) {
+      // Update servers state with new data
-          return {
+      setServers(prevServers => {
-            ...server,
+        const results: ServerData[] = serverList.map((server, index) => {
-            a2sData,
+          const a2sData = data.results?.[index]
-            status: 'online' as const
+          
+          if (a2sData) {
+            return {
+              ...server,
+              a2sData,
+              status: 'online' as const
+            }
+          } else {
+            // If no data for this server but we have previous data, keep the previous data
+            const prevServer = prevServers.find(s => s.ip === server.ip && s.port === server.port)
+            if (prevServer?.a2sData) {
+              return prevServer // Keep previous successful data
+            }
+            return {
+              ...server,
+              status: 'offline' as const,
+              error: 'No response from server'
+            }
           }
-        } else {
+        })
-          return {
+        return results
-            ...server,
-            status: 'offline' as const,
-            error: 'No response from server'
-          }
-        }
       })
 
-      // Only update if we got successful data
-      setServers(results)
       setLoading(false)
       setLastUpdated(Date.now())
       setHasInitialData(true)
     } catch (error) {
       console.error('Failed to fetch server data:', error)
       
-      // If we have initial data, don't update the servers state
+      // If we already have data from a previous successful fetch, keep using it
-      // This prevents showing errors to users when polling fails
+      // Only show error state if this is the very first fetch attempt
-      if (!hasInitialData) {
+      setServers(prevServers => {
-        // Only set offline servers if this is the first attempt
+        if (prevServers.length > 0 && hasInitialData) {
-        const offlineServers: ServerData[] = serverList.map(server => ({
+          // Keep previous data on polling errors
-          ...server,
+          return prevServers
-          status: 'offline' as const,
+        } else {
-          error: error instanceof Error ? error.message : 'Unknown error'
+          // First fetch failed, show offline state
-        }))
+          const offlineServers: ServerData[] = serverList.map(server => ({
-        setServers(offlineServers)
+            ...server,
-        setLoading(false)
+            status: 'offline' as const,
-      }
+            error: error instanceof Error ? error.message : 'Unknown error'
-      // Don't update lastUpdated on error to keep showing previous timestamp
+          }))
+          return offlineServers
+        }
+      })
+      
+      setLoading(false)
+      // Don't update lastUpdated on error to keep showing previous successful fetch time
     }
   }
 
@@ -129,7 +143,7 @@ export function ServerProvider({ children }: { children: ReactNode }) {
     }, 2000) // Poll every 2 seconds
 
     return () => clearInterval(interval)
-  }, [])
+  }, []) // Empty dependency array is intentional - we want this to run once
 
   return (
     <ServerContext.Provider value={{ servers, loading, lastUpdated, hasInitialData }}>

src/pages/Servers.tsx

@@ -307,15 +307,6 @@ function Servers() {
                     {server.category}
                   </span>
                 </div>
-                {server.error && (
-                  <p style={{
-                    fontSize: '0.9rem',
-                    color: '#ef4444',
-                    marginBottom: '1rem'
-                  }}>
-                    Error: {server.error}
-                  </p>
-                )}
               </div>
 
               {/* Join Button */}