🐛 fix: TypewriterEffect not refreshing on language change (lobehub#11657)

Innei · web-flow · commit ba30f46bc619 · 2026-01-20T21:03:45.000+08:00
Add locale key to TypewriterEffect components to force re-render when language changes
diff --git a/src/app/[variants]/(desktop)/desktop-onboarding/components/LobeMessage.tsx b/src/app/[variants]/(desktop)/desktop-onboarding/components/LobeMessage.tsx
@@ -2,6 +2,7 @@ import { Flexbox, type FlexboxProps, Text } from '@lobehub/ui';
 import { TypewriterEffect, type TypewriterEffectProps } from '@lobehub/ui/awesome';
 import { LoadingDots } from '@lobehub/ui/chat';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
 
@@ -11,6 +12,9 @@ interface LobeMessageProps extends Omit<FlexboxProps, 'children'> {
 }
 
 const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest }) => {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+
   return (
     <Flexbox gap={8} {...rest}>
       <ProductLogo size={fontSize * 2} />
@@ -21,6 +25,7 @@ const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest
           deletePauseDuration={1000}
           deletingSpeed={32}
           hideCursorWhileTyping={'afterTyping'}
+          key={locale}
           pauseDuration={16_000}
           sentences={sentences}
           typingSpeed={64}
diff --git a/src/app/[variants]/(desktop)/desktop-onboarding/features/WelcomeStep.tsx b/src/app/[variants]/(desktop)/desktop-onboarding/features/WelcomeStep.tsx
@@ -17,7 +17,8 @@ interface WelcomeStepProps {
 }
 
 const WelcomeStep = memo<WelcomeStepProps>(({ onNext }) => {
-  const { t } = useTranslation('onboarding');
+  const { t, i18n } = useTranslation('onboarding');
+  const locale = i18n.language;
   const updateGeneralConfig = useUserStore((s) => s.updateGeneralConfig);
 
   const handleNext = () => {
@@ -53,6 +54,7 @@ const WelcomeStep = memo<WelcomeStepProps>(({ onNext }) => {
             deletePauseDuration={1000}
             deletingSpeed={32}
             hideCursorWhileTyping={'afterTyping'}
+            key={locale}
             pauseDuration={16_000}
             sentences={[
               t('telemetry.title', { name: 'Lobe AI' }),
diff --git a/src/app/[variants]/(main)/home/features/WelcomeText/index.tsx b/src/app/[variants]/(main)/home/features/WelcomeText/index.tsx
@@ -7,7 +7,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const WelcomeText = memo(() => {
-  const { t } = useTranslation('welcome');
+  const { t, i18n } = useTranslation('welcome');
+  const locale = i18n.language;
 
   const sentences = useMemo(() => {
     const messages = t('welcomeMessages', { returnObjects: true }) as Record<string, string>;
@@ -28,6 +29,7 @@ const WelcomeText = memo(() => {
         deletePauseDuration={1000}
         deletingSpeed={32}
         hideCursorWhileTyping={'afterTyping'}
+        key={locale}
         pauseDuration={16_000}
         sentences={sentences}
         typingSpeed={64}
diff --git a/src/app/[variants]/onboarding/components/LobeMessage.tsx b/src/app/[variants]/onboarding/components/LobeMessage.tsx
@@ -2,6 +2,7 @@ import { Flexbox, type FlexboxProps, Text } from '@lobehub/ui';
 import { TypewriterEffect, type TypewriterEffectProps } from '@lobehub/ui/awesome';
 import { LoadingDots } from '@lobehub/ui/chat';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
 
@@ -11,6 +12,9 @@ interface LobeMessageProps extends Omit<FlexboxProps, 'children'> {
 }
 
 const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest }) => {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+
   return (
     <Flexbox gap={8} {...rest}>
       <ProductLogo size={fontSize * 2} />
@@ -21,6 +25,7 @@ const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest
           deletePauseDuration={1000}
           deletingSpeed={32}
           hideCursorWhileTyping={'afterTyping'}
+          key={locale}
           pauseDuration={16_000}
           sentences={sentences}
           typingSpeed={64}
diff --git a/src/app/[variants]/onboarding/features/TelemetryStep.tsx b/src/app/[variants]/onboarding/features/TelemetryStep.tsx
@@ -19,7 +19,8 @@ interface TelemetryStepProps {
 }
 
 const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
-  const { t } = useTranslation('onboarding');
+  const { t, i18n } = useTranslation('onboarding');
+  const locale = i18n.language;
   const [check, setCheck] = useState(true);
   const [isNavigating, setIsNavigating] = useState(false);
   const isNavigatingRef = useRef(false);
@@ -63,6 +64,7 @@ const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
             deletePauseDuration={1000}
             deletingSpeed={32}
             hideCursorWhileTyping={'afterTyping'}
+            key={locale}
             pauseDuration={16_000}
             sentences={[
               t('telemetry.title', { name: 'Lobe AI' }),
