🐛 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:
@@ -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
|
||||||
|
|||||||
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user