Enable SSR for Hubspot Forms

[brycekunkel]

Is your feature request related to a problem? Please describe.
I've noticed that when a form is conditionally rendered in Next.js, the HubspotForm component will often render before the form is actually loaded. See GIF at bottom.

Describe the solution you'd like
I'm hopeful that a preload prop could be added to allow for preloading of the form, which would prevent the blank space from appearing.

Describe alternatives you've considered
I looked into adding a "Loading" indicator, but the loading prop appears to display true before the form is displayed

[snelsi]

1. It's impossible to render Hubspot form on the server. It uses global window methods internally.
2. When you are mounting a form, your targetId element should always be present on the page. Don't hide it behind conditional logic.
3. You can add custom Loading component like this:

const { loaded, error } = useHubspotForm({
  target: "targetId"
})
return (
  <>
    <div id="targetId" />
    {!loaded && !error && <MyCustomLoader />}
  </>
)

[brycekunkel]

Thanks @snelsi. That makes sense - I wasn't sure if it'd be possible to use a getServerSideProps functionality to load the script prior to the component mounting. Not a big deal, just learning!