fix(executors): fall back into "loading" state if arguments change

packages/npm/@amazeelabs/executors/src/client.tsx

@@ -91,6 +91,7 @@ function DelayedOperation<T extends any>({
   const [error, setError] = useState<unknown>();
 
   useEffect(() => {
+    setState('loading');
     operation()
       .then((result) => {
         setData(result);
@@ -101,7 +102,7 @@ function DelayedOperation<T extends any>({
         setError(error);
         setState('error');
       });
-  }, [operation]);
+  }, [operation, setData, setError, setState]);
 
   return <>{children({ state, error, data: data! })}</>;
 }

packages/npm/@amazeelabs/executors/test/src/add-client.tsx

@@ -1,11 +1,29 @@
 'use client';
+import { useEffect, useState } from 'react';
+
 import { Operation, OperationExecutorsProvider } from '../../src/client.js';
-import { TestComponent } from './add.js';
+import { Calc, DelayedAdd, TestComponent } from './add.js';
+
+function CountUp() {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(count + 1);
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [count, setCount]);
+  return <Calc label={'Count'} a={count} b={0} Operation={Operation} />;
+}
 
 export const Add = () => (
-  <TestComponent
-    label={'Client'}
-    OperationExecutorsProvider={OperationExecutorsProvider}
-    Operation={Operation}
-  />
+  <>
+    <TestComponent
+      label={'Client'}
+      OperationExecutorsProvider={OperationExecutorsProvider}
+      Operation={Operation}
+    />
+    <OperationExecutorsProvider executors={[DelayedAdd]}>
+      <CountUp />
+    </OperationExecutorsProvider>
+  </>
 );

packages/npm/@amazeelabs/executors/test/src/add.tsx

@@ -87,15 +87,13 @@ export function Calc({
   return (
     <Operation id={AddOperation} variables={{ a, b }}>
       {(props) => {
-        if (props.state === 'loading') {
-          return <p data-testid={label}>Loading...</p>;
-        }
         if (props.state === 'error') {
           return <p data-testid={label}>Error: {`${props.error}`}</p>;
         }
         return (
           <p data-testid={label}>
-            {label}: {a} + {b} = {props.data.result}
+            {label}: {a} + {b} ={' '}
+            {props.state === 'loading' ? '...' : props.data.result}
           </p>
         );
       }}