refactor: update CloudVersionSelect to handle client-side rendering

- Introduced a new state variable to manage client-side rendering, ensuring the currentCloudVersion.label is displayed correctly after the component mounts.
- Retained the labelRef for potential future use while simplifying the rendering logic for better clarity.

Author: shhdgit

src/components/Layout/HeaderAction.tsx

@@ -215,7 +215,7 @@ const LangSwitch = (props: {
           onClick={toggleLanguage(Locale.zh)}
           disableRipple
           selected={language === Locale.zh}
-          disabled={!supportedLocales.includes(Locale.zh) || !isClassic}
+          disabled={!supportedLocales.includes(Locale.zh)}
         >
           <Typography component="span" color={theme.palette.carbon[900]}>
             <Trans i18nKey="lang.zh" />

src/components/Layout/VersionSelect/CloudVersionSelect.tsx

@@ -10,7 +10,7 @@ import { Box, Typography } from "@mui/material";
 import { Chip } from "@mui/material";
 import { CLOUD_MODE_KEY, useCloudPlan } from "shared/useCloudPlan";
 import { VersionSelectButton, VersionSelectMenu } from "./SharedSelect";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export const CLOUD_PLAN_LABEL_ELEMENT_ID = "cloud-plan-label";
 
@@ -131,13 +131,10 @@ export default function CloudVersionSelect(props: VersionSelectProps) {
   const [open, setOpen] = React.useState<boolean>(false);
   const handleClick = () => setOpen(true);
   const handleClose = () => setOpen(false);
-  // const labelRef = useRef<HTMLSpanElement>(null);
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const [isClient, setIsClient] = useState(false);
 
-  // useEffect(() => {
-  //   if (labelRef.current && currentCloudVersion.label) {
-  //     labelRef.current.textContent = currentCloudVersion.label as string;
-  //   }
-  // }, [currentCloudVersion]);
+  useEffect(() => setIsClient(true), []);
 
   return (
     <>
@@ -151,7 +148,11 @@ export default function CloudVersionSelect(props: VersionSelectProps) {
               lineHeight: "1.25rem",
             }}
           >
-            {currentCloudVersion.label}
+            {isClient ? (
+              currentCloudVersion.label
+            ) : (
+              <span id={CLOUD_PLAN_LABEL_ELEMENT_ID} ref={labelRef} />
+            )}
           </Typography>
           {currentCloudVersion?.icon}
         </Box>