🐛 fix(ui): prevent pagination flicker when tables have no data

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
This commit is contained in:
t0ng7u
2025-07-20 12:36:38 +08:00
parent 19c522d9bc
commit 4d7562fd79
5 changed files with 8 additions and 8 deletions

View File

@@ -43,7 +43,7 @@ export const useChannelsData = () => {
const [idSort, setIdSort] = useState(false); const [idSort, setIdSort] = useState(false);
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [channelCount, setChannelCount] = useState(ITEMS_PER_PAGE); const [channelCount, setChannelCount] = useState(0);
const [groupOptions, setGroupOptions] = useState([]); const [groupOptions, setGroupOptions] = useState([]);
// UI states // UI states

View File

@@ -34,7 +34,7 @@ export const useRedemptionsData = () => {
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const [activePage, setActivePage] = useState(1); const [activePage, setActivePage] = useState(1);
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE); const [tokenCount, setTokenCount] = useState(0);
const [selectedKeys, setSelectedKeys] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]);
// Edit state // Edit state
@@ -337,18 +337,18 @@ export const useRedemptionsData = () => {
setFormApi, setFormApi,
setLoading, setLoading,
// Event handlers // Event handlers
handlePageChange, handlePageChange,
handlePageSizeChange, handlePageSizeChange,
rowSelection, rowSelection,
handleRow, handleRow,
closeEdit, closeEdit,
getFormValues, getFormValues,
// Batch operations // Batch operations
batchCopyRedemptions, batchCopyRedemptions,
batchDeleteRedemptions, batchDeleteRedemptions,
// Translation function // Translation function
t, t,
}; };

View File

@@ -36,7 +36,7 @@ export const useTokensData = () => {
const [tokens, setTokens] = useState([]); const [tokens, setTokens] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [activePage, setActivePage] = useState(1); 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 [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);

View File

@@ -68,7 +68,7 @@ export const useLogsData = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingStat, setLoadingStat] = useState(false); const [loadingStat, setLoadingStat] = useState(false);
const [activePage, setActivePage] = useState(1); 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 [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [logType, setLogType] = useState(0); const [logType, setLogType] = useState(0);

View File

@@ -34,7 +34,7 @@ export const useUsersData = () => {
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const [groupOptions, setGroupOptions] = useState([]); const [groupOptions, setGroupOptions] = useState([]);
const [userCount, setUserCount] = useState(ITEMS_PER_PAGE); const [userCount, setUserCount] = useState(0);
// Modal states // Modal states
const [showAddUser, setShowAddUser] = useState(false); const [showAddUser, setShowAddUser] = useState(false);