fix: Use setTimeout instead of requestAnimationFrame which is more reliable and support calOrigin in prerender #21205 (#21730)

packages/embeds/embed-core/src/embed-iframe.ts

@@ -102,7 +102,7 @@ export const embedStore = {
           // Avoid unnecessary history push
           window.history.replaceState({}, "", currentUrl.toString());
         }
-        requestAnimationFrame(updateIfNeeded);
+        runAsap(updateIfNeeded);
         return {
           hasChanged,
         };
@@ -167,11 +167,8 @@ if (isBrowser) {
 }
 
 function runAsap(fn: (...arg: unknown[]) => void) {
-  if (isSafariBrowser) {
-    // https://adpiler.com/blog/the-full-solution-why-do-animations-run-slower-in-safari/
-    return setTimeout(fn, 50);
-  }
-  return requestAnimationFrame(fn);
+  // We don't use rAF because it runs slower in Safari plus doesn't run if the iframe is hidden sometimes
+  return setTimeout(fn, 50);
 }
 
 function log(...args: unknown[]) {

packages/embeds/embed-core/src/embed.ts

@@ -1159,6 +1159,7 @@ class CalApi {
     type,
     options = {},
     pageType,
+    calOrigin,
   }: {
     calLink: string;
     type?: "modal" | "floatingButton";
@@ -1166,6 +1167,7 @@ class CalApi {
       prerenderIframe?: boolean;
     };
     pageType?: EmbedPageType;
+    calOrigin?: string;
   }) {
     // eslint-disable-next-line prefer-rest-params
     validate(arguments[0], {
@@ -1210,7 +1212,7 @@ class CalApi {
         this.cal.isPrerendering = true;
         this.modal({
           calLink,
-          calOrigin: config.calOrigin,
+          calOrigin: calOrigin || config.calOrigin,
           __prerender: true,
           ...(pageType ? { config: { "cal.embed.pageType": pageType } } : {}),
         });
@@ -1227,15 +1229,18 @@ class CalApi {
     calLink,
     type,
     pageType,
+    calOrigin,
   }: {
     calLink: string;
     type: "modal" | "floatingButton";
     pageType?: EmbedPageType;
+    calOrigin?: string;
   }) {
     this.preload({
       calLink,
       type,
       pageType,
+      calOrigin,
     });
   }