Hi :). I'm utilising Nodejs for my backend and Reactjs for my Frontend, everything is working quite well but I am now attempting to use the EmailVerification feature. I have got it embedded in my page with

EmailVerification.init({
            mode: "REQUIRED",
            disableDefaultUI: true
        }),

AND


<div className="max-w-md mx-auto">
                <EmailVerification onRender={onChildRender} />
              </div>

But the component takes some time to render. It works fine and I can verify an email but I just want to be able to display a loading icon as the components load. How could I look to do this? The EmailVerification component does not provide any callbacks so I attempted to make one based on some searching I did in the discord. Maybe I have done it wrong? (it's for the page that says 'Verify your email address Please click on the link in the email we just sent you to confirm your email address.')

EmailVerification.init({
      mode: "REQUIRED",
      disableDefaultUI: true,
      override: {
        emailVerification: {
          components: {
            EmailVerificationSendVerifyEmail_Override: ({
              DefaultComponent,
              ...props
            }) => {

              // It does not reach here, but the component still renders. Is this the correct override? 
              useEffect(() => {
                // Call the callback function passed from the parent component
                props.onRender();
              }, [onRender]);
              // this is the screen which shows that an email verification email has been sent
              return <DefaultComponent {...props} />;
            },
          },
        },
      },
    }),

hey @tykindsir which version of the auth-react SDK are you using?

Looks to be ^0.31.5

@tykindsir hi, please try replacing

{/* Rest of the JSX */}

with

<EmailVerification/>

Beautiful

For future references

<div className="max-w-md mx-auto">
                <EmailVerificationComponentsOverrideProvider
                  components={{
                    // In this case, the <EmailVerificationSendVerifyEmail_Override>
                    // will render the original component
                    EmailVerificationSendVerifyEmail_Override: ({
                      DefaultComponent,
                      ...props
                    }) => {
                      console.log("hi");
                      return (
                        <div>
                          <DefaultComponent {...props} />
                        </div>
                      );
                    },
                  }}
                >
                  <EmailVerification /> 
                </EmailVerificationComponentsOverrideProvider>
              </div>

Thanks for the quick help @alisheraituarov and @rp_st