Enhance LiveHostPage with timer management for status refresh

- Introduced a ref for managing a timeout for refreshing the live host room status.
- Implemented cleanup logic in useEffect to clear the timeout on component unmount.
- Updated the room status toggle logic to utilize the timer for loading page data, improving performance and user experience.

src/app/(dashboard)/live/host/page.tsx

@@ -34,7 +34,7 @@ import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
 import type { SorterResult } from "antd/es/table/interface";
 import type { Dayjs } from "dayjs";
 import type React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import ImageUpload from "@/components/ImageUpload";
 import UserBrief from "@/components/UserBrief";
 import { useGlobalConsts } from "@/contexts/GlobalConstsContext";
@@ -106,6 +106,9 @@ const LiveHostPage: React.FC = () => {
   const [selectedModeratorToRemove, setSelectedModeratorToRemove] = useState<
     string[]
   >([]);
+  const toggleStatusRefreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
 
   const roomTypeOptions = useMemo(() => {
     const candidateGroups = [
@@ -151,6 +154,15 @@ const LiveHostPage: React.FC = () => {
     loadPageData();
   }, [queryParams]);
 
+  useEffect(() => {
+    return () => {
+      if (toggleStatusRefreshTimerRef.current) {
+        clearTimeout(toggleStatusRefreshTimerRef.current);
+        toggleStatusRefreshTimerRef.current = null;
+      }
+    };
+  }, []);
+
   const displayedDataSource = useMemo(() => {
     return dataSource.filter((record) => {
       if (localFilters.roomType) {
@@ -306,7 +318,13 @@ const LiveHostPage: React.FC = () => {
             await closeLiveHostRoom({ id: record.id });
             message.success("房间已关闭");
           }
-          loadPageData();
+          if (toggleStatusRefreshTimerRef.current) {
+            clearTimeout(toggleStatusRefreshTimerRef.current);
+          }
+          toggleStatusRefreshTimerRef.current = setTimeout(() => {
+            loadPageData();
+            toggleStatusRefreshTimerRef.current = null;
+          }, 300);
         } catch (error) {
           console.error("Failed to toggle room status:", error);
         }