fix: useLocale hook is being used outside of App Router & time zone dropdown timeout (#21306)

packages/platform/atoms/lib/useLocale.ts

@@ -0,0 +1,26 @@
+import type { TFunction, i18n } from "i18next";
+import { useTranslation } from "react-i18next";
+
+import { useAtomsContext } from "@calcom/atoms/hooks/useAtomsContext";
+
+type useLocaleReturnType = {
+  i18n: i18n;
+  t: TFunction;
+  isLocaleReady: boolean;
+};
+
+export const useLocale = (
+  namespace: Parameters<typeof useTranslation>[0] = "common"
+): useLocaleReturnType => {
+  const context = useAtomsContext();
+  const { i18n, t } = useTranslation(namespace);
+  const isLocaleReady = Object.keys(i18n).length > 0;
+  if (context?.clientId) {
+    return { i18n: context.i18n, t: context.t, isLocaleReady: true } as unknown as useLocaleReturnType;
+  }
+  return {
+    i18n,
+    t,
+    isLocaleReady,
+  };
+};

packages/platform/atoms/vite.config.ts

@@ -53,6 +53,7 @@ export default defineConfig(({ mode }) => {
         os: resolve("../../../node_modules/rollup-plugin-node-builtins"),
         "@": path.resolve(__dirname, "./src"),
         "@calcom/lib/markdownToSafeHTML": path.resolve(__dirname, "./lib/markdownToSafeHTML"),
+        "@calcom/lib/hooks/useLocale": path.resolve(__dirname, "./lib/useLocale"),
         "@radix-ui/react-tooltip": path.resolve(__dirname, "./src/components/ui/tooltip.tsx"),
         "@radix-ui/react-dialog": path.resolve(__dirname, "./src/components/ui/dialog.tsx"),
         ".prisma/client": path.resolve(__dirname, "../../prisma-client"),