I have a react component that opens a modal window, and inside of that modal window, there is a second component, a form.

The form needs to communicate with an external service, as it loads an iframe.

When the page loads, the form component does not exist, so when I open the modal, the form component is rendered, THEN it communicates with the external service, and returns the iframe, so it takes a few seconds to load.

Is there any way to have this component ready when the page first loads? Before the modal is actually opened?

The code:

const HubspotForm = ({ id, redirect = false }) => {
    const script = document.createElement('script');
    script.src = 'https://js.hsforms.net/forms/v2.js';
    document.body.appendChild(script);
    const jqScript = document.createElement('script');
    jqScript.src =
        'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
    document.body.appendChild(jqScript);
    const base_url = window.location.origin;

    script.addEventListener('load', () => {
        if (window.hbspt) {
            window.hbspt.forms.create({
                portalId: 'xxx',
                formId: 'xxx',
                target: '#hubspotForm',
                inlineMessage:
                    "<p style='text-align:center;padding:100px 30px'>Redirecting, please wait...</p>",

                onFormSubmit: function ($form) {
                    let redirect_url = `${base_url}/thank-you/?goal=1`;
                    setTimeout(function () {
                        window.location = redirect_url;
                    }, 250);
                },
            });
        }
    });

    return (
        <div>
            <div
                id="hubspotForm"
                css={css`
                    input[type='submit'] {
                        background-color: var(--primary) !important;
                    }
                `}
            ></div>
        </div>
    );
};

return (
    <StyledDialog
        onClose={handleClose}
        aria-labelledby="simple-dialog-title"
        open={open}
    >
        <div className="modal-close" onClick={handleClose}>
            <GrClose color="red" />
        </div>
        <h3>{demoRequest.demoRequestFormTitle}</h3>

        <p>{demoRequest.demoRequestFormText}</p>
        <HubspotForm redirect={true} />
    </StyledDialog>
);

...

export default function SimpleDialogDemo({
    btnText = 'Talk To An Expert',
    variant = 'contained',
    white = false,
}) {

    const classes = useStyles();
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = (value) => {
        setOpen(false);
    };

    return (
        <>
            <Button
                variant="contained"
                color="primary"
                className={white ? classes.btnWhite : classes.btn}
                disableElevation={white ? true : false}
                onClick={handleClickOpen}
            >
                {btnText}
            </Button>
            <SimpleDialog open={open} onClose={handleClose} />
        </>
    );
}

CodePudding user response：

Can you try to use display:none in css with zIndex: -1... and to this set your openModal property to true in state by default

CodePudding user response：

It seems that you have two jobs.

1. Display the modal
2. Acquire the needed information to open the iframe.

I would get the info initially somewhere else in the load function and store it in the state. So when the modal opens, the state will be already set and no overhead in loading time is added.

Is there any specific reason the communication is initiating when the modal opens?