improve parameter fetch feedback

src/NodeParam.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { 
     Box, Button, Table, TableBody, TableCell, TableContainer, 
     TableHead, TableRow, Typography, Paper, Tooltip, Chip
@@ -18,6 +18,9 @@ const OPCODE_ERASE = 1;
 const NodeParam = ({ nodeId, nodes }) => {
     const [modalOpen, setModalOpen] = useState(false);
     const [editParamIndex, setEditParamIndex] = useState(null);
+    const [paramsUpdateTimestamp, setParamsUpdateTimestamp] = useState(0);
+    const [fetchingParams, setFetchingParams] = useState(false);
+    const fetchTimeoutRef = useRef(null);
 
     if (!nodeId) return null;
     const node = nodes[nodeId];
@@ -25,19 +28,40 @@ const NodeParam = ({ nodeId, nodes }) => {
 
     const handleFetchParams = () => {
         const localNode = window.localNode;
-        let currentParamIndex = 0; 
+        let currentParamIndex = 0;
+        setFetchingParams(true);
+        setParamsUpdateTimestamp(Date.now());
+        if (fetchTimeoutRef.current) clearTimeout(fetchTimeoutRef.current);
+
+        const resetFetchTimeout = () => {
+            if (fetchTimeoutRef.current) clearTimeout(fetchTimeoutRef.current);
+            fetchTimeoutRef.current = setTimeout(() => {
+                setFetchingParams(false);
+                console.warn(`Fetch params timed out for node ${nodeId} at index ${currentParamIndex}`);
+            }, 3000);
+        };
+
         const callback = (transfer) => {
             const msg = transfer.payload;
+            console.log('Param response:', { nodeId: transfer.sourceNodeId, index: currentParamIndex, name: msg?.fields?.name?.toString?.() });
             if (msg && msg.fields.name.items.length > 0) {
                 if (msg && transfer.destNodeId === localNode.nodeId) {
                     localNode.updateNodeParamsFromResponse(transfer, currentParamIndex);
+                    setParamsUpdateTimestamp(Date.now());
                     currentParamIndex += 1;
-                    localNode.fetchNodeParam(nodeId, currentParamIndex, '', callback); 
+                    resetFetchTimeout();
+                    localNode.fetchNodeParam(nodeId, currentParamIndex, '', callback);
                 }
+            } else {
+                setFetchingParams(false);
+                setParamsUpdateTimestamp(Date.now());
+                if (fetchTimeoutRef.current) clearTimeout(fetchTimeoutRef.current);
+                console.log(`Finished fetching params for node ${nodeId}`);
             }
         };
 
-        localNode.fetchNodeParam(nodeId, 0, '', callback); 
+        resetFetchTimeout();
+        localNode.fetchNodeParam(nodeId, 0, '', callback);
     };
 
     const handleEraseParams = () => {
@@ -341,8 +365,9 @@ const NodeParam = ({ nodeId, nodes }) => {
                         variant="contained"
                         sx={{ mr: 1 }}
                         startIcon={<SyncIcon />}
+                        disabled={fetchingParams}
                     >
-                        Fetch All
+                        {fetchingParams ? 'Fetching...' : 'Fetch All'}
                     </Button>
                     <Button
                         onClick={handleSaveParams}
@@ -386,7 +411,8 @@ const NodeParam = ({ nodeId, nodes }) => {
                 </Box>
             </Box>
             {renderNodeParams()}
-            <ParamEditorSelector 
+            <span style={{ display: 'none' }}>{paramsUpdateTimestamp}</span>
+            <ParamEditorSelector
                 open={modalOpen} 
                 onClose={() => setModalOpen(false)}
                 nodeId={nodeId}