React Calendly Package infinitely loading

Question

I am currently using the react-calendly package and everything is working as expected. I am able to pick a date, etc. and post the event to the calendar. The only issue is below the calendar there are 3 gray dots showing the widget is loading. They never go away, the widget appears to be in a constant state of loading. Is there a reason this is happening? Or maybe could offer a separate solution as opposed to the package I am using. Click https://m44fc.csb.app/ to see what I am talking about. Here is the code pen if you would like to test a solution https://codesandbox.io/s/dreamy-dewdney-m44fc?file=/src/App.js

My code is as follows:

import React, { useState } from 'react'
import { InlineWidget } from 'react-calendly'

function App() {
  return (
    <>
      <InlineWidget
        url='https://calendly.com/myURL'
        utm={{
          utmCampaign: 'Spring Sale 2019',
          utmContent: 'Shoe and Shirts',
          utmMedium: 'Ad',
          utmSource: 'Facebook',
          utmTerm: 'Spring'
        }}
      />
    </>
  )
}

export default App

getting the following issue in my chrome dev tools:

Resolve this issue by updating the attributes of the cookie: Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute. Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests

Is there something I need to do to resolve these?

Answer 1

Looks like the React component is missing an important style property. We'll look into patching it, but in the meantime the workaround is to pass the following styles yourself when you're using the component:

<InlineWidget
    url="https://calendly.com/robert-612/complimentary-consultation"
    utm={{
      utmCampaign: "Spring Sale 2019",
      utmContent: "Shoe and Shirts",
      utmMedium: "Ad",
      utmSource: "Facebook",
      utmTerm: "Spring"
    }}
    styles={{
      minWidth: "320px",
      height: '630px', 
      position: 'relative',
    }}
  />  

The minWidth and height values are taken from the component's defaults, the position: relative is what was missing. This should ensure that the widget always covers the loading dots, no matter what the page size is.