Fixed Bug 69840: Settings: After refreshing the Backup page, the page title description is displayed in single text

packages/client/src/pages/PortalSettings/categories/data-import/index.js

@@ -54,6 +54,7 @@ const DataImport = ({
   getMigrationStatus,
   isMigrationInit,
   setIsMigrationInit,
+  tReady,
 }) => {
   const navigate = useNavigate();
 
@@ -109,10 +110,13 @@ const DataImport = ({
   };
 
   useEffect(() => {
-    setDocumentTitle(t("DataImport"));
     handleMigrationCheck();
   }, []);
 
+  useEffect(() => {
+    if (tReady) setDocumentTitle(t("DataImport"));
+  }, [tReady]);
+
   const redirectToWorkspace = (title) => {
     switch (title) {
       case "GoogleWorkspace":

packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js

@@ -66,7 +66,7 @@ const { EveryDayType, EveryWeekType, EveryMonthType } = AutoBackupPeriod;
 class AutomaticBackup extends React.PureComponent {
   constructor(props) {
     super(props);
-    const { t, language } = props;
+    const { t, tReady, language } = props;
     moment.locale(language);
 
     this.state = {
@@ -96,7 +96,7 @@ class AutomaticBackup extends React.PureComponent {
     this.maxNumberCopiesArray = [];
     this.weekdaysLabelArray = [];
 
-    setDocumentTitle(t("AutoBackup"));
+    if (tReady) setDocumentTitle(t("AutoBackup"));
 
     this.getTime();
     this.getMonthNumbers();
@@ -170,6 +170,12 @@ class AutomaticBackup extends React.PureComponent {
     this.setBasicSettings();
   }
 
+  componentDidUpdate(prevProps) {
+    const { t, tReady } = this.props;
+    if (prevProps.tReady !== tReady && tReady)
+      setDocumentTitle(t("AutoBackup"));
+  }
+
   componentWillUnmount() {
     const { clearProgressInterval } = this.props;
     clearTimeout(this.timerId);

packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js

@@ -70,9 +70,9 @@ class ManualBackup extends React.Component {
 
     this.timerId = null;
 
-    const { t } = props;
+    const { t, tReady } = props;
 
-    setDocumentTitle(t("DataBackup"));
+    if (tReady) setDocumentTitle(t("DataBackup"));
 
     this.state = {
       selectedFolder: "",
@@ -150,6 +150,13 @@ class ManualBackup extends React.Component {
     this.setBasicSettings();
   }
 
+  componentDidUpdate(prevProps) {
+    const { t, tReady } = this.props;
+
+    if (prevProps.tReady !== tReady && tReady)
+      setDocumentTitle(t("DataBackup"));
+  }
+
   componentWillUnmount() {
     const { clearProgressInterval } = this.props;
     clearTimeout(this.timerId);

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js

@@ -118,7 +118,7 @@ const PresetsContainer = styled.div`
 `;
 
 const PortalIntegration = (props) => {
-  const { t, currentColorScheme, sdkLink, theme } = props;
+  const { t, currentColorScheme, sdkLink, theme, tReady } = props;
 
   const isSmall = useRef(
     (() => {
@@ -130,8 +130,6 @@ const PortalIntegration = (props) => {
 
   const [isFlex, setIsFlex] = useState(isSmall.current);
 
-  setDocumentTitle(t("JavascriptSdk"));
-
   const navigate = useNavigate();
 
   const navigateToPortal = () => navigate("docspace");
@@ -191,6 +189,10 @@ const PortalIntegration = (props) => {
     },
   ];
 
+  useEffect(() => {
+    if (tReady) setDocumentTitle(t("JavascriptSdk"));
+  }, [tReady]);
+
   const onResize = (entries) => {
     const belowThreshold = entries[0].contentRect.width <= 600;
     if (belowThreshold !== isSmall.current) {

packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/index.js

@@ -47,11 +47,15 @@ const PluginSDK = ({
   isEmptyList,
   theme,
 }) => {
-  const { t } = useTranslation(["WebPlugins", "VersionHistory", "Common"]);
+  const { t, ready } = useTranslation([
+    "WebPlugins",
+    "VersionHistory",
+    "Common",
+  ]);
 
   React.useEffect(() => {
-    setDocumentTitle(t("WebPlugins:PluginSDK"));
-  }, []);
+    if (ready) setDocumentTitle(t("WebPlugins:PluginSDK"));
+  }, [ready]);
 
   const isMobile = currentDeviceType === "mobile";
 

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/index.js

@@ -57,8 +57,6 @@ const SMTPSettings = (props) => {
     setIsInit(true);
   };
   useEffect(() => {
-    setDocumentTitle(t("Settings:SMTPSettings"));
-
     timerId = setTimeout(() => {
       setIsLoading(true);
     }, 400);
@@ -71,6 +69,10 @@ const SMTPSettings = (props) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (ready) setDocumentTitle(t("Settings:SMTPSettings"));
+  }, [ready]);
+
   const isLoadingContent = isLoading || !ready;
 
   if (!isLoading && !isInit) return <></>;

packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/index.js

@@ -55,14 +55,17 @@ const SingleSignOn = (props) => {
     isInit,
     currentDeviceType,
   } = props;
-  const { t } = useTranslation(["SingleSignOn", "Settings"]);
+  const { t, ready } = useTranslation(["SingleSignOn", "Settings"]);
   const isMobileView = currentDeviceType === DeviceType.mobile;
 
   useEffect(() => {
     isSSOAvailable && !isInit && init();
-    setDocumentTitle(t("Settings:SingleSignOn"));
   }, []);
 
+  useEffect(() => {
+    if (ready) setDocumentTitle(t("Settings:SingleSignOn"));
+  }, [ready]);
+
   if (!isInit && !isMobileView && isSSOAvailable) return <SSOLoader />;
 
   return (

packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js

@@ -111,9 +111,9 @@ const RootContainer = styled(Box)`
 class ThirdPartyServices extends React.Component {
   constructor(props) {
     super(props);
-    const { t } = props;
+    const { t, tReady } = props;
 
-    setDocumentTitle(`${t("ThirdPartyAuthorization")}`);
+    if (tReady) setDocumentTitle(`${t("ThirdPartyAuthorization")}`);
 
     this.state = {
       dialogVisible: false,
@@ -135,6 +135,12 @@ class ThirdPartyServices extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const { t, tReady } = this.props;
+    if (prevProps.tReady !== tReady && tReady)
+      setDocumentTitle(t("ThirdPartyAuthorization"));
+  }
+
   onChangeLoading = (status) => {
     this.setState({
       isLoading: status,