Persistent loading spinner in react-calendly component

Other Questions Calendly
1

I’m working with a React scheduling widget using the react-calendly library. The calendar functionality works fine - users can select dates and appointments get created successfully. However, there’s an annoying visual issue where three gray loading dots keep spinning underneath the calendar widget. These dots never disappear even after the widget has fully loaded and is functional.

Here’s my component setup:

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

function SchedulingComponent() {
  return (
    <div>
      <InlineWidget
        url='https://calendly.com/mySchedule'
        utm={{
          utmCampaign: 'Summer Promotion 2023',
          utmContent: 'Services and Products',
          utmMedium: 'Banner',
          utmSource: 'Website',
          utmTerm: 'Booking'
        }}
      />
    </div>
  )
}

export default SchedulingComponent

I’m also seeing some console warnings about cookie SameSite attributes in Chrome developer tools. The warnings mention needing to set SameSite=None and Secure for cross-site cookies, or using SameSite=Strict/Lax for same-site requests.

Has anyone encountered this endless loading state before? Are there any configuration options to fix the loading indicator, or should I consider switching to a different scheduling solution?

2

I encountered a similar issue a few months back while integrating the react-calendly component. The persistent loading dots are usually a result of iframe communication problems, often linked to SameSite cookie settings. To resolve this, try enclosing your InlineWidget within a styled container that defines a specific height. Also, adding the pageSettings prop can help; for example, set it with styles={{ height: '630px' }} and pageSettings={{ hideEventTypeDetails: false, hideLandingPageDetails: false }}}. Ensure your application is served over HTTPS, as this is crucial for proper cookie handling and communication with Calendly’s servers. Once configured correctly, the loading spinner should ideally cease.

3

I’ve dealt with these widget headaches for years - iframe approaches always mess up loading states.

Your issue stems from third-party widgets that don’t work well with modern web standards. Cookie warnings are just the start.

Skip fighting Calendly’s limitations. Build your own scheduling flow instead. Create a clean calendar interface that connects to your backend, then sync appointments wherever you need them.

I’ve automated this setup multiple times using workflow automation. You get a custom calendar UI that matches your site, handles loading properly, and connects to any scheduling backend. No spinning dots, no cookie issues, no broken third-party widgets.

The automation handles everything - available slots, confirmation emails, calendar updates. Takes about an hour to set up versus days debugging widgets.

You also get full control over user experience instead of dealing with Calendly’s random changes.

4

I experienced a similar issue a while back, which can be quite frustrating. The persistent spinning dots are often due to the Calendly iframe not properly communicating its loading status back to the React component. A practical solution I found was to set a height prop on the InlineWidget, for example, use height={630}. This allows the component to correctly determine when it has fully loaded. Additionally, placing the InlineWidget within a div styled with overflow: hidden can effectively hide those loading indicators, although it doesn’t address the underlying issue. As for the SameSite cookie warnings, they are a known issue due to the iframe setup, and while they might be annoying, they generally don’t interfere with the functionality.

5

i faced that issue too! it’s often related to cookie settings. try accessing in incognito mode to see if it loads fine. if so, it’s those SameSite cookie warnings you mentioned. make sure you allow third-party cookies for calendly to function properly.

6

Had this exact issue 6 months ago on a client project. The spinner gets stuck because the Calendly iframe isn’t telling the parent component it’s done loading.

Wrap your InlineWidget with a height constraint and add the styles prop:

<InlineWidget
  url='https://calendly.com/mySchedule'
  styles={{
    height: '630px'
  }}
  utm={{
    utmCampaign: 'Summer Promotion 2023',
    utmContent: 'Services and Products',
    utmMedium: 'Banner',
    utmSource: 'Website',
    utmTerm: 'Booking'
  }}
/>

Those cookie warnings are separate - they’re from Calendly’s domain and won’t mess with loading. Just ignore them since they don’t break anything.

If the spinner’s still there, add pageSettings={{ hideLandingPageDetails: true }} to clean up the widget. Sometimes the loading dots hang around when Calendly tries rendering extra page stuff that clashes with React.

This tutorial helped me debug similar integration problems:

Fixed everything once I applied the height constraint.