소스 검색

🔄 fix(tables): ensure search buttons show loading state consistently across all tables

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.
Apple\Apple 9 달 전
부모
커밋
7a83060012
3개의 변경된 파일22개의 추가작업 그리고 18개의 파일을 삭제
  1. 20 16
      web/src/components/table/ChannelsTable.js
  2. 1 1
      web/src/components/table/RedemptionsTable.js
  3. 1 1
      web/src/components/table/UsersTable.js

+ 20 - 16
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('查询')}

+ 1 - 1
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('查询')}

+ 1 - 1
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('查询')}