From 7a83060012b57ce4c2e8b52726c8bc71c9e90f5f Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 8 Jun 2025 22:01:54 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20fix(tables):=20ensure=20search?=
 =?UTF-8?q?=20buttons=20show=20loading=20state=20consistently=20across=20a?=
 =?UTF-8?q?ll=20tables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix inconsistent loading state behavior where search buttons in ChannelsTable,
RedemptionsTable, and UsersTable didn't display loading animation when tables
were loading data, unlike LogsTable which handled this correctly.

Changes:
- Fix ChannelsTable searchChannels function to properly manage loading state
  - Move setSearching(true) to function start and use try-finally pattern
  - Ensure loading state is set for both search and load operations
- Update search button loading prop in ChannelsTable: loading={searching} → loading={loading || searching}
- Update search button loading prop in RedemptionsTable: loading={searching} → loading={loading || searching}
- Update search button loading prop in UsersTable: loading={searching} → loading={loading || searching}

This ensures search buttons show loading state consistently when:
- Table is loading data (initial load, pagination, operations)
- Search operation is in progress

All table components now provide unified UX behavior matching LogsTable,
preventing duplicate clicks and clearly indicating system state to users.
---
 web/src/components/table/ChannelsTable.js    | 36 +++++++++++---------
 web/src/components/table/RedemptionsTable.js |  2 +-
 web/src/components/table/UsersTable.js       |  2 +-
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/web/src/components/table/ChannelsTable.js b/web/src/components/table/ChannelsTable.js
index 73840535..f8145056 100644
--- a/web/src/components/table/ChannelsTable.js
+++ b/web/src/components/table/ChannelsTable.js
@@ -844,23 +844,27 @@ const ChannelsTable = () => {
   const searchChannels = async (enableTagMode) => {
     const { searchKeyword, searchGroup, searchModel } = getFormValues();
 
-    if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
-      await loadChannels(activePage - 1, pageSize, idSort, enableTagMode);
-      // setActivePage(1);
-      return;
-    }
     setSearching(true);
-    const res = await API.get(
-      `/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}&id_sort=${idSort}&tag_mode=${enableTagMode}`,
-    );
-    const { success, message, data } = res.data;
-    if (success) {
-      setChannelFormat(data, enableTagMode);
-      setActivePage(1);
-    } else {
-      showError(message);
+    try {
+      if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
+        await loadChannels(activePage - 1, pageSize, idSort, enableTagMode);
+        // setActivePage(1);
+        return;
+      }
+
+      const res = await API.get(
+        `/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}&id_sort=${idSort}&tag_mode=${enableTagMode}`,
+      );
+      const { success, message, data } = res.data;
+      if (success) {
+        setChannelFormat(data, enableTagMode);
+        setActivePage(1);
+      } else {
+        showError(message);
+      }
+    } finally {
+      setSearching(false);
     }
-    setSearching(false);
   };
 
   const updateChannelProperty = (channelId, updateFn) => {
@@ -1424,7 +1428,7 @@ const ChannelsTable = () => {
             <Button
               type="primary"
               htmlType="submit"
-              loading={searching}
+              loading={loading || searching}
               className="!rounded-full w-full md:w-auto"
             >
               {t('查询')}
diff --git a/web/src/components/table/RedemptionsTable.js b/web/src/components/table/RedemptionsTable.js
index bf8985aa..4f9779a9 100644
--- a/web/src/components/table/RedemptionsTable.js
+++ b/web/src/components/table/RedemptionsTable.js
@@ -504,7 +504,7 @@ const RedemptionsTable = () => {
               <Button
                 type="primary"
                 htmlType="submit"
-                loading={searching}
+                loading={loading || searching}
                 className="!rounded-full flex-1 md:flex-initial md:w-auto"
               >
                 {t('查询')}
diff --git a/web/src/components/table/UsersTable.js b/web/src/components/table/UsersTable.js
index 247a015a..5574dab7 100644
--- a/web/src/components/table/UsersTable.js
+++ b/web/src/components/table/UsersTable.js
@@ -554,7 +554,7 @@ const UsersTable = () => {
               <Button
                 type="primary"
                 htmlType="submit"
-                loading={searching}
+                loading={loading || searching}
                 className="!rounded-full flex-1 md:flex-initial md:w-auto"
               >
                 {t('查询')}