From 53ed4d4858a78df6dd7379dfb24a73dc2f8a1362 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 25 Jul 2022 14:17:01 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A6=81=E8=A8=80?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8B=E7=9A=84placeholder=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Panel/group/TextPanel.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Panel/group/TextPanel.tsx b/web/src/components/Panel/group/TextPanel.tsx
index 7967ebf7..d251a310 100644
--- a/web/src/components/Panel/group/TextPanel.tsx
+++ b/web/src/components/Panel/group/TextPanel.tsx
@@ -1,6 +1,6 @@
 import { ChatBox } from '@/components/ChatBox';
 import { ChatInputMentionsContextProvider } from '@/components/ChatBox/ChatInputBox/context';
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useState } from 'react';
 import {
   useGroupPanelInfo,
   useGroupMemberInfos,
@@ -26,7 +26,7 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
     const [placeholder, setPlaceholder] = useState<string | undefined>(
       undefined
     );
-    useInterval(() => {
+    const updatePlaceholder = useCallback(() => {
       if (muteUntil) {
         setPlaceholder(
           muteUntil
@@ -40,8 +40,15 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
       } else {
         setPlaceholder(undefined);
       }
-      // 10s 检查一次，因为 humanizeMsDuration 不会精确到秒
-    }, 10000);
+    }, [muteUntil]);
+    useInterval(
+      updatePlaceholder,
+      10000 // 10s 检查一次，因为 humanizeMsDuration 不会精确到秒
+    );
+    useLayoutEffect(() => {
+      // 当到期时间发生变化后立即更新
+      updatePlaceholder();
+    }, [muteUntil]);
 
     if (panelInfo === undefined) {
       return null;