From 4d7562fd79277aab7dff08857ebc37ab258b232a Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 20 Jul 2025 12:36:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(ui):=20prevent=20pagination?=
 =?UTF-8?q?=20flicker=20when=20tables=20have=20no=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix pagination component flickering issue across multiple table views
by initializing count states to 0 instead of ITEMS_PER_PAGE. This
prevents the pagination component from briefly appearing and then
disappearing when tables are empty.

Changes:
- usage-logs: logCount initial value 0 (was ITEMS_PER_PAGE)
- users: userCount initial value 0 (was ITEMS_PER_PAGE)
- tokens: tokenCount initial value 0 (was ITEMS_PER_PAGE)
- channels: channelCount initial value 0 (was ITEMS_PER_PAGE)
- redemptions: tokenCount initial value 0 (was ITEMS_PER_PAGE)

The createCardProPagination function already handles total <= 0 by
returning null, so this ensures consistent behavior across all table
components and improves user experience by eliminating visual flicker.

Affected files:
- web/src/hooks/usage-logs/useUsageLogsData.js
- web/src/hooks/users/useUsersData.js
- web/src/hooks/tokens/useTokensData.js
- web/src/hooks/channels/useChannelsData.js
- web/src/hooks/redemptions/useRedemptionsData.js
---
 web/src/hooks/channels/useChannelsData.js       | 2 +-
 web/src/hooks/redemptions/useRedemptionsData.js | 8 ++++----
 web/src/hooks/tokens/useTokensData.js           | 2 +-
 web/src/hooks/usage-logs/useUsageLogsData.js    | 2 +-
 web/src/hooks/users/useUsersData.js             | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/hooks/channels/useChannelsData.js b/web/src/hooks/channels/useChannelsData.js
index 2dc77a13..d188c9fe 100644
--- a/web/src/hooks/channels/useChannelsData.js
+++ b/web/src/hooks/channels/useChannelsData.js
@@ -43,7 +43,7 @@ export const useChannelsData = () => {
   const [idSort, setIdSort] = useState(false);
   const [searching, setSearching] = useState(false);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
-  const [channelCount, setChannelCount] = useState(ITEMS_PER_PAGE);
+  const [channelCount, setChannelCount] = useState(0);
   const [groupOptions, setGroupOptions] = useState([]);
 
   // UI states
diff --git a/web/src/hooks/redemptions/useRedemptionsData.js b/web/src/hooks/redemptions/useRedemptionsData.js
index ce6d6219..3eb4c9d5 100644
--- a/web/src/hooks/redemptions/useRedemptionsData.js
+++ b/web/src/hooks/redemptions/useRedemptionsData.js
@@ -34,7 +34,7 @@ export const useRedemptionsData = () => {
   const [searching, setSearching] = useState(false);
   const [activePage, setActivePage] = useState(1);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
-  const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
+  const [tokenCount, setTokenCount] = useState(0);
   const [selectedKeys, setSelectedKeys] = useState([]);
 
   // Edit state
@@ -337,18 +337,18 @@ export const useRedemptionsData = () => {
     setFormApi,
     setLoading,
 
-        // Event handlers
+    // Event handlers
     handlePageChange,
     handlePageSizeChange,
     rowSelection,
     handleRow,
     closeEdit,
     getFormValues,
-    
+
     // Batch operations
     batchCopyRedemptions,
     batchDeleteRedemptions,
-    
+
     // Translation function
     t,
   };
diff --git a/web/src/hooks/tokens/useTokensData.js b/web/src/hooks/tokens/useTokensData.js
index 3e97618f..cfa78cc6 100644
--- a/web/src/hooks/tokens/useTokensData.js
+++ b/web/src/hooks/tokens/useTokensData.js
@@ -36,7 +36,7 @@ export const useTokensData = () => {
   const [tokens, setTokens] = useState([]);
   const [loading, setLoading] = useState(true);
   const [activePage, setActivePage] = useState(1);
-  const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
+  const [tokenCount, setTokenCount] = useState(0);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [searching, setSearching] = useState(false);
 
diff --git a/web/src/hooks/usage-logs/useUsageLogsData.js b/web/src/hooks/usage-logs/useUsageLogsData.js
index f13d0dc9..b2312680 100644
--- a/web/src/hooks/usage-logs/useUsageLogsData.js
+++ b/web/src/hooks/usage-logs/useUsageLogsData.js
@@ -68,7 +68,7 @@ export const useLogsData = () => {
   const [loading, setLoading] = useState(false);
   const [loadingStat, setLoadingStat] = useState(false);
   const [activePage, setActivePage] = useState(1);
-  const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
+  const [logCount, setLogCount] = useState(0);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [logType, setLogType] = useState(0);
 
diff --git a/web/src/hooks/users/useUsersData.js b/web/src/hooks/users/useUsersData.js
index 63b97af1..59774175 100644
--- a/web/src/hooks/users/useUsersData.js
+++ b/web/src/hooks/users/useUsersData.js
@@ -34,7 +34,7 @@ export const useUsersData = () => {
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [searching, setSearching] = useState(false);
   const [groupOptions, setGroupOptions] = useState([]);
-  const [userCount, setUserCount] = useState(ITEMS_PER_PAGE);
+  const [userCount, setUserCount] = useState(0);
 
   // Modal states
   const [showAddUser, setShowAddUser] = useState(false);