From 1d2cc1e475bb9b132bb95fbda1864f16947e9a53 Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Thu, 25 Jun 2026 18:40:48 +0800
Subject: [PATCH] feat: add hydration support and fallback for Countdown
 component (#37943)

---
 .../signin/__tests__/countdown.spec.tsx       | 24 ++++++++++++++++-
 web/app/components/signin/countdown.tsx       | 26 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/web/app/components/signin/__tests__/countdown.spec.tsx b/web/app/components/signin/__tests__/countdown.spec.tsx
index abd89686f17..2679cdb553b 100644
--- a/web/app/components/signin/__tests__/countdown.spec.tsx
+++ b/web/app/components/signin/__tests__/countdown.spec.tsx
@@ -1,4 +1,6 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { hydrateRoot } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import Countdown from '../countdown'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '../storage'
@@ -46,6 +48,26 @@ describe('Countdown', () => {
 
   // State Management Tests
   describe('State Management', () => {
+    it('should render stored countdown time after hydrating server markup', async () => {
+      vi.useRealTimers()
+      const savedTime = 30000
+      localStorage.setItem(COUNT_DOWN_KEY, String(savedTime))
+      const container = document.createElement('div')
+      container.innerHTML = renderToString(<Countdown />)
+      const root = hydrateRoot(container, <Countdown />)
+
+      try {
+        await waitFor(() => {
+          expect(container).toHaveTextContent('30')
+        })
+      }
+      finally {
+        act(() => {
+          root.unmount()
+        })
+      }
+    })
+
     it('should initialize leftTime from localStorage if available', () => {
       const savedTime = 45000
       localStorage.setItem(COUNT_DOWN_KEY, String(savedTime))
diff --git a/web/app/components/signin/countdown.tsx b/web/app/components/signin/countdown.tsx
index 54c22262d7e..1d5ea4ae46f 100644
--- a/web/app/components/signin/countdown.tsx
+++ b/web/app/components/signin/countdown.tsx
@@ -1,6 +1,7 @@
 'use client'
 import { useCountDown } from 'ahooks'
-import { useEffect, useState } from 'react'
+import { useIsClient } from 'foxact/use-is-client'
+import { Suspense, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { COUNT_DOWN_TIME_MS, useCountdownLeftTimeValue, useSetCountdownLeftTime } from './storage'
 
@@ -9,6 +10,29 @@ type CountdownProps = {
 }
 
 export default function Countdown({ onResend }: CountdownProps) {
+  const isClient = useIsClient()
+
+  if (!isClient)
+    return <CountdownFallback />
+
+  return (
+    <Suspense fallback={<CountdownFallback />}>
+      <CountdownContent onResend={onResend} />
+    </Suspense>
+  )
+}
+
+function CountdownFallback() {
+  const { t } = useTranslation()
+
+  return (
+    <p className="system-xs-regular text-text-tertiary">
+      <span>{t('checkCode.didNotReceiveCode', { ns: 'login' })}</span>
+    </p>
+  )
+}
+
+function CountdownContent({ onResend }: CountdownProps) {
   const { t } = useTranslation()
   const storedLeftTime = useCountdownLeftTimeValue()
   const setStoredLeftTime = useSetCountdownLeftTime()