React embed rapidly flashes between light and dark theme

[mreilly-lula]

https://github.com/user-attachments/assets/f26e8b07-bcdd-44e8-8d2b-d935b9804395

Issue Summary

See video attached. Embed is rapidly flashing between light and dark theme.

Steps to Reproduce

"use client";
import { getCalApi } from "@calcom/embed-react";
import { ReactNode } from "react";
import { useEffect } from "react";
import { cn } from "../../lib/utils";
import { Button } from "@nextui-org/react";

// Use this component when embeding a button for cal.com
// Pass in new styles in className prop to override default styles if needed

const CalEmbedButton = ({
  children,
  className,
  bookingLink,
  color,
  variant,
  size = "md",
}: {
  className?: string;
  children: ReactNode;
  bookingLink: string;
  size: any;
  color: any;
  variant: any;
}) => {
  useEffect(() => {
    (async function () {
      const cal = await getCalApi();
      cal("ui", {
        "theme": "light",
        "styles": {
          "branding": { "brandColor":  '#000000' },
        },
      });
    })();
  }, []);

  return (
    <Button
      color={color}
      variant={variant}
      size={size}
      className={cn(className)}
      data-cal-link={bookingLink}
      data-cal-config='{"theme":"light"}'
    >
      {children}
    </Button>
  );
};

export default CalEmbedButton;

Technical details

• google chrome and safari

[tragenn3333]

please assign me

[CarinaWolli]

please assign me

We don't assign to issues, feel free to work on it and open a PR 🙏