React SDK - cant conditionally render descope based on onReady and loading state

[ido-weiss]

Descope component cant be rendered conditionally, onReady should come from a hook and not as a callback from the component, instead of rendering a container with opacity 0 or 1 based on the loading we should be able to listen to changes and render the component.

reproduce:

    {!isLoading &&  <Descope
              flowId="sign-up-or-in-passwords-social-copy-new-demo"
              onSuccess={handleSuccess}
              onError={handleError}
              onReady={onReady}
            />}

proposition:

const { isReady } = useDescope();
    {isReady ?  <Descope
              flowId="sign-up-or-in-passwords-social-copy-new-demo"
              onSuccess={handleSuccess}
              onError={handleError}
              onReady={onReady}
            /> : <Loader/>}

and then render the component based on that, or maybe have a loader in the flow creator to style before the component is ready.
Thanks,

[asafshen]

@ido-weiss thank you for the feedback

I'm one of the maintainers of this repo. Thats proposal make sense to me as well

We will consider that and will update 🙏

[Divyanshu7001]

Hi @asafshen ,
Is this proposal still up for contribution?
I would love to contribute here ..as this will be my first contribution in descope-js😊

[asafshen]

Hi @Divyanshu7001

We are still haven't got to it, but we are welcoming any contributions of course!