fix(web): Safari work items crash from requestIdleCallback

apps/web/app/entry.client.tsx

@@ -4,6 +4,7 @@
  * See the LICENSE file for details.
  */
 
+import "@/lib/polyfills";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";

apps/web/core/components/core/render-if-visible-HOC.tsx

@@ -7,6 +7,7 @@
 import type { ReactNode, MutableRefObject } from "react";
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@plane/utils";
+import { scheduleIdleCallback } from "@/lib/polyfills";
 
 type Props = {
   defaultHeight?: string;
@@ -51,8 +52,8 @@ function RenderIfVisible(props: Props) {
       const observer = new IntersectionObserver(
         (entries) => {
           //DO no remove comments for future
-          if (typeof window !== undefined && window.requestIdleCallback && useIdletime) {
-            window.requestIdleCallback(() => setShouldVisible(entries[entries.length - 1].isIntersecting), {
+          if (typeof window !== "undefined" && useIdletime) {
+            scheduleIdleCallback(() => setShouldVisible(entries[entries.length - 1].isIntersecting), {
               timeout: 300,
             });
           } else {
@@ -77,7 +78,7 @@ function RenderIfVisible(props: Props) {
   //Set height after render
   useEffect(() => {
     if (intersectionRef.current && isVisible && shouldRecordHeights) {
-      window.requestIdleCallback(() => {
+      scheduleIdleCallback(() => {
         if (intersectionRef.current) placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
       });
     }

apps/web/core/lib/polyfills/index.ts

@@ -4,8 +4,12 @@
  * See the LICENSE file for details.
  */
 
-if (typeof window !== "undefined" && window) {
-  // Add request callback polyfill to browser in case it does not exist
+/** Installs `window.requestIdleCallback` / `cancelIdleCallback` when missing (e.g. older Safari). Idempotent. */
+function ensureRequestIdleCallbackPolyfilled(): void {
+  if (typeof window === "undefined" || !window) {
+    return;
+  }
+
   window.requestIdleCallback =
     window.requestIdleCallback ??
     function (cb) {
@@ -27,4 +31,15 @@ if (typeof window !== "undefined" && window) {
     };
 }
 
-export {};
+ensureRequestIdleCallbackPolyfilled();
+
+export function scheduleIdleCallback(
+  callback: IdleRequestCallback,
+  options?: IdleRequestOptions,
+): number {
+  ensureRequestIdleCallbackPolyfilled();
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  return window.requestIdleCallback(callback, options);
+}