Fix: mounting state use theme (#7203)

Co-authored-by: Guest <[email protected]>

Author: harshsinghatz

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

@@ -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(),
   };
 }