From 0e7276370fc787e4cc3a9555d7618c497491a70e Mon Sep 17 00:00:00 2001
From: Harsh Singh <51085015+harshsinghatz@users.noreply.github.com>
Date: Mon, 20 Feb 2023 15:17:33 +0530
Subject: [PATCH] Fix: mounting state use theme (#7203)

Co-authored-by: Guest <guest@pop-os.localdomain>
---
 apps/web/components/ui/form/Select.tsx | 14 ++++++++++----
 packages/lib/hooks/useMountedState.ts  | 22 ----------------------
 packages/lib/hooks/useTheme.tsx        |  4 ----
 3 files changed, 10 insertions(+), 30 deletions(-)
 delete mode 100644 packages/lib/hooks/useMountedState.ts

diff --git a/apps/web/components/ui/form/Select.tsx b/apps/web/components/ui/form/Select.tsx
index d035a5beee..e54c893b7b 100644
--- a/apps/web/components/ui/form/Select.tsx
+++ b/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) => ({
diff --git a/packages/lib/hooks/useMountedState.ts b/packages/lib/hooks/useMountedState.ts
deleted file mode 100644
index 70597ea4d9..0000000000
--- a/packages/lib/hooks/useMountedState.ts
+++ /dev/null
@@ -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;
-}
diff --git a/packages/lib/hooks/useTheme.tsx b/packages/lib/hooks/useTheme.tsx
index 759fe7fbbc..1530af3b4f 100644
--- a/packages/lib/hooks/useTheme.tsx
+++ b/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(),
   };
 }