Fix: mounting state use theme (#7203)

Co-authored-by: Guest <guest@pop-os.localdomain>

apps/web/components/ui/form/Select.tsx

@@ -29,7 +29,8 @@ function Select<
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >({ className, ...props }: SelectProps<Option, IsMulti, Group>) {
-  const { resolvedTheme, forcedTheme /*isReady*/ } = useTheme();
+  const [mounted, setMounted] = useState<boolean>(false);
+  const { resolvedTheme, forcedTheme } = useTheme();
   const hasDarkTheme = !forcedTheme && resolvedTheme === "dark";
   const darkThemeColors = {
     /** Dark Theme starts */
@@ -73,10 +74,15 @@ function Select<
     /** Dark Theme ends */
   };
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   // Till we know in JS the theme is ready, we can't render react-select as it would render with light theme instead
-  // if (!isReady) {
-  //   return <input type="text" className={className} />;
-  // }
+  if (!mounted) {
+    return <input type="text" className={className} />;
+  }
+
   return (
     <ReactSelect
       theme={(theme) => ({

packages/lib/hooks/useMountedState.ts

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-
-// credits: https://github.com/streamich/react-use/blob/master/src/useMountedState.ts
-// jsdoc generated by chat-gpt :)
-/**
- * A custom React hook that returns a function to check if the component is mounted.
- * @returns {function(): boolean} A function that returns `true` if the component is mounted and `false` otherwise.
- */
-export default function useMountedState(): () => boolean {
-  const mountedRef = useRef<boolean>(false);
-  const get = useCallback(() => mountedRef.current, []);
-
-  useEffect(() => {
-    mountedRef.current = true;
-
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  return get;
-}

packages/lib/hooks/useTheme.tsx

@@ -4,15 +4,12 @@ import { useEffect } from "react";
 import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
 import type { Maybe } from "@calcom/trpc/server";
 
-import useMountedState from "./useMountedState";
-
 // makes sure the ui doesn't flash
 export default function useTheme(theme?: Maybe<string>) {
   let currentTheme: Maybe<string> = theme || "system";
 
   const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();
-  const isMounted = useMountedState();
   // Embed UI configuration takes more precedence over App Configuration
   currentTheme = embedTheme || theme;
 
@@ -28,6 +25,5 @@ export default function useTheme(theme?: Maybe<string>) {
     setTheme,
     forcedTheme,
     activeTheme,
-    isReady: isMounted(),
   };
 }