Designer is not ready

[brampurnot]

Hi there! I'm just trying something simple in NextJS. I'm importing the component like this:
const WorkflowBuilder = dynamic(
() => import('../../../../components/WorkflowBuilder'),
{
loading: () => ,
ssr: false,
},
);

The WorkflowBuilder component is also running on the client (use cient).
const controller = useSequentialWorkflowDesignerController();
useEffect(() => {
if (controller?.isReady()) {
alert('Controller is ready');
} else {
alert('Controller is not ready');
}
}, [controller]);

For some reason, it never hits the Controller is ready conditions. It's constantly false. Is there anything I'm missing here?

The reason I'm trying to do this is because I'm trying to update the workflow definition but I think I'm hitting a race condition because I'm constantly getting the error message stating that the designer is not ready. So I'm just trying to do a basic check and set some state when the designer is ready.

Bram

[b4rtaz]

Hello @brampurnot,

are you passing the controller variable to the <SequentialWorkflowDesigner> component?

const controller = useSequentialWorkflowDesignerController();

<SequentialWorkflowDesigner
   ...
   controller={controller}
/>

I've just released the new version (0.27.3) that allows to listen for the isReady === true event:

useEffect(() => {
    function onIsReadyChanged() {
        console.log(`isReady=${controller.isReady()}`);
    }
    controller.onIsReadyChanged.subscribe(onIsReadyChanged);
    return () => {
        controller.onIsReadyChanged.unsubscribe(onIsReadyChanged);
    };
}, [controller]);

You can check the online demo here, logs are printed to the console.

[brampurnot]

Yeah I’m passing it in! I’ll test out the new version tomorrow to see if that works!

Thanks for the quick turnaround on this.
Bram

[brampurnot]

This works like a charm! Thanks so much.
Bram