diff --git a/packages/npm/@amazeelabs/executors/src/client.tsx b/packages/npm/@amazeelabs/executors/src/client.tsx index ccd7c863b7..c229514af3 100644 --- a/packages/npm/@amazeelabs/executors/src/client.tsx +++ b/packages/npm/@amazeelabs/executors/src/client.tsx @@ -91,6 +91,7 @@ function DelayedOperation({ const [error, setError] = useState(); useEffect(() => { + setState('loading'); operation() .then((result) => { setData(result); @@ -101,7 +102,7 @@ function DelayedOperation({ setError(error); setState('error'); }); - }, [operation]); + }, [operation, setData, setError, setState]); return <>{children({ state, error, data: data! })}; } diff --git a/packages/npm/@amazeelabs/executors/test/src/add-client.tsx b/packages/npm/@amazeelabs/executors/test/src/add-client.tsx index a3a9e0b6b6..0a8fac3418 100644 --- a/packages/npm/@amazeelabs/executors/test/src/add-client.tsx +++ b/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 ; +} export const Add = () => ( - + <> + + + + + ); diff --git a/packages/npm/@amazeelabs/executors/test/src/add.tsx b/packages/npm/@amazeelabs/executors/test/src/add.tsx index 2a983b64b6..5aedb71c8d 100644 --- a/packages/npm/@amazeelabs/executors/test/src/add.tsx +++ b/packages/npm/@amazeelabs/executors/test/src/add.tsx @@ -87,15 +87,13 @@ export function Calc({ return ( {(props) => { - if (props.state === 'loading') { - return

Loading...

; - } if (props.state === 'error') { return

Error: {`${props.error}`}

; } return (

- {label}: {a} + {b} = {props.data.result} + {label}: {a} + {b} ={' '} + {props.state === 'loading' ? '...' : props.data.result}

); }}