fix: Resolve race condition between palette fetch and node upload in the app (WB-340)

.changeset/nodes-palette-race-condition.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': patch
+---
+
+Simultaneous loading of nodes and the palette can result in a race condition. If nodes are loaded before the palette, new errors (for example, for fields that were not evaluated earlier) are skipped, and the node only shows a “!” indicator when the user selects it.

packages/sdk/src/store/slices/diagram-slice/actions.ts

@@ -1,4 +1,6 @@
 // About actions: apps/demo/src/app/store/README.md
+import { isDeepEqual } from 'remeda';
+
 import {
   migrateLegacyHandleIdsOnEdges,
   migrateLegacyHandleIdsOnNodes,
@@ -8,7 +10,7 @@ import type { VariableDefinition } from '../../../features/variables/types';
 import type { LayoutDirection } from '../../../node/common';
 import type { WorkflowBuilderEdge, WorkflowBuilderNode } from '../../../node/node-data';
 import type { IntegrationDataFormat } from '../../../types/integration';
-import { getNodeWithErrors } from '../../../utils/validation/get-node-errors';
+import { getNodeWithErrors, getNodesWithErrors } from '../../../utils/validation/get-node-errors';
 import { useStore } from '../../store';
 import { skipDynamicValuesInEdges, skipDynamicValuesInNodes } from './utils/dynamic-values';
 
@@ -122,6 +124,27 @@ export function getStoreSingleSelected() {
   return selectSingleSelectedElement(state);
 }
 
+/**
+ * Revalidates all nodes in the store and updates their JSON schema validation errors if needed.
+ *
+ * Compares current nodes with revalidated ones and only updates state when errors change,
+ * avoiding unnecessary re-renders.
+ *
+ * @category Store
+ */
+export function refreshNodesErrorsIfNeeded() {
+  const stateNodes = useStore.getState().nodes;
+  const stateNodesWithRefreshedErrors = getNodesWithErrors(stateNodes);
+
+  if (isDeepEqual(stateNodes, stateNodesWithRefreshedErrors)) {
+    return;
+  }
+
+  useStore.setState({
+    nodes: stateNodesWithRefreshedErrors,
+  });
+}
+
 export function saveVariableDefinition(definition: VariableDefinition) {
   useStore.setState((state) => ({
     globalVariables: {

packages/sdk/src/store/slices/palette/palette-slice.ts

@@ -7,6 +7,7 @@ import {
   StatusType,
 } from '../../../node/common';
 import type { GetDiagramState, SetDiagramState } from '../../store';
+import { refreshNodesErrorsIfNeeded } from '../diagram-slice/actions';
 
 export type PaletteState = {
   isSidebarExpanded: boolean;
@@ -40,6 +41,9 @@ export function usePaletteSlice(set: SetDiagramState, get: GetDiagramState): Pal
         data: getPaletteData(),
         fetchDataStatus: StatusType.Success,
       });
+
+      // Set a timeout to postpone to next event loop iteration
+      setTimeout(() => refreshNodesErrorsIfNeeded(), 1);
     },
     getNodeDefinition: (nodeType) => {
       const { data } = get();

packages/sdk/src/utils/validation/get-node-errors.ts

@@ -42,3 +42,7 @@ export function getNodeWithErrors(node: WorkflowBuilderNode) {
     },
   };
 }
+
+export function getNodesWithErrors(nodes: WorkflowBuilderNode[]): WorkflowBuilderNode[] {
+  return nodes.map(getNodeWithErrors);
+}