@cccsaurora/howler-ui 3.1.0-dev.1708 → 3.1.0-dev.1716

package/components/routes/home/TasksPanel.test.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import TasksPanel from './TasksPanel';
+const mockTaskSearch = vi.hoisted(() => vi.fn());
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        useAppUser: () => ({ user: { username: 'alice' } })
+    };
+});
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            task: {
+                search: (...args) => mockTaskSearch(...args)
+            }
+        }
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/routes/cases/detail/CaseTask', () => ({
+    default: ({ task }) => _jsx("div", { children: task.summary })
+}));
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
+    return {
+        ...actual,
+        Link: ({ children, to, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+    };
+});
+const Wrapper = ({ children }) => _jsx(I18nextProvider, { i18n: i18n, children: children });
+const taskItem = (summary, caseId = 'case-1') => ({
+    task: { id: `task-${summary}`, assignment: 'alice', summary, complete: false },
+    case: {
+        __index: 'case',
+        case_id: caseId,
+        title: `Case ${caseId}`,
+        status: 'open',
+        updated: '2024-01-01T00:00:00Z'
+    }
+});
+const page = (items, offset = 0, hasMore = false) => ({
+    items,
+    offset,
+    rows: 25,
+    has_more: hasMore
+});
+describe('TasksPanel', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockTaskSearch.mockReturnValue('task-request');
+        mockDispatchApi.mockResolvedValue(page([taskItem('Open task')], 0, true));
+    });
+    it('loads one page of 25 incomplete tasks by default', async () => {
+        render(_jsx(TasksPanel, {}), { wrapper: Wrapper });
+        expect(await screen.findByText('Open task')).toBeInTheDocument();
+        expect(mockTaskSearch).toHaveBeenCalledTimes(1);
+        expect(mockTaskSearch).toHaveBeenCalledWith({ offset: 0, rows: 25, filter: 'incomplete' }, expect.any(AbortSignal));
+        expect(screen.getByRole('button', { name: 'Next' })).toBeEnabled();
+        expect(screen.getByRole('button', { name: 'Previous' })).toBeDisabled();
+    });
+    it('requests one page at a time and paginates according to has_more', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(page([taskItem('First page')], 0, true))
+            .mockResolvedValueOnce(page([taskItem('Second page')], 25, false))
+            .mockResolvedValueOnce(page([taskItem('First page again')], 0, false));
+        render(_jsx(TasksPanel, {}), { wrapper: Wrapper });
+        expect(await screen.findByText('First page')).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+        expect(await screen.findByText('Second page')).toBeInTheDocument();
+        expect(mockTaskSearch.mock.calls.map(([request]) => request.offset)).toEqual([0, 25]);
+        expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Previous' })).toBeEnabled();
+        fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
+        expect(await screen.findByText('First page again')).toBeInTheDocument();
+        expect(mockTaskSearch.mock.calls.map(([request]) => request.offset)).toEqual([0, 25, 0]);
+    });
+    it('maps each status filter to the API and resets pagination on filter changes', async () => {
+        const user = userEvent.setup();
+        render(_jsx(TasksPanel, {}), { wrapper: Wrapper });
+        expect(await screen.findByText('Open task')).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+        await waitFor(() => expect(mockTaskSearch).toHaveBeenCalledTimes(2));
+        expect(mockTaskSearch.mock.calls[1][0]).toMatchObject({ offset: 25, filter: 'incomplete' });
+        const filterSelect = screen.getByRole('combobox');
+        await user.click(filterSelect);
+        await user.click(screen.getByRole('option', { name: 'Completed' }));
+        await waitFor(() => expect(mockTaskSearch).toHaveBeenCalledTimes(3));
+        expect(mockTaskSearch.mock.calls[2][0]).toMatchObject({ offset: 0, rows: 25, filter: 'complete' });
+        await user.click(filterSelect);
+        await user.click(screen.getByRole('option', { name: 'All tasks' }));
+        await waitFor(() => expect(mockTaskSearch).toHaveBeenCalledTimes(4));
+        expect(mockTaskSearch.mock.calls[3][0]).toMatchObject({ offset: 0, filter: 'all' });
+        await user.click(filterSelect);
+        await user.click(screen.getByRole('option', { name: 'Not completed' }));
+        await waitFor(() => expect(mockTaskSearch).toHaveBeenCalledTimes(5));
+        expect(mockTaskSearch.mock.calls[4][0]).toMatchObject({ offset: 0, filter: 'incomplete' });
+    });
+    it('keeps the latest results and reports only the current refresh after requests overlap', async () => {
+        let resolveFirst;
+        let resolveSecond;
+        mockDispatchApi
+            .mockReturnValueOnce(new Promise(resolve => (resolveFirst = resolve)))
+            .mockReturnValueOnce(new Promise(resolve => (resolveSecond = resolve)));
+        const firstTick = Symbol('first');
+        const secondTick = Symbol('second');
+        const onRefreshComplete = vi.fn();
+        const { rerender } = render(_jsx(TasksPanel, { refreshTick: firstTick, onRefreshComplete: onRefreshComplete }), {
+            wrapper: Wrapper
+        });
+        const firstSignal = mockTaskSearch.mock.calls[0][1];
+        rerender(_jsx(TasksPanel, { refreshTick: secondTick, onRefreshComplete: onRefreshComplete }));
+        expect(firstSignal.aborted).toBe(true);
+        resolveSecond?.(page([taskItem('Latest task')], 0, false));
+        expect(await screen.findByText('Latest task')).toBeInTheDocument();
+        await waitFor(() => expect(onRefreshComplete).toHaveBeenCalledTimes(1));
+        expect(onRefreshComplete).toHaveBeenCalledWith('tasks-panel', secondTick);
+        resolveFirst?.(page([taskItem('Stale task')], 0, false));
+        await waitFor(() => expect(screen.queryByText('Stale task')).not.toBeInTheDocument());
+        expect(screen.getByText('Latest task')).toBeInTheDocument();
+        expect(onRefreshComplete).toHaveBeenCalledTimes(1);
+    });
+    it('backs up to the last non-empty page when a refresh finds that data has shrunk', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(page(Array.from({ length: 25 }, (_, i) => taskItem(`Task ${i}`)), 0, true))
+            .mockResolvedValueOnce(page(Array.from({ length: 25 }, (_, i) => taskItem(`Task ${i + 25}`)), 25, true))
+            .mockResolvedValueOnce(page([taskItem('Last page task')], 50, false))
+            .mockResolvedValueOnce(page([], 50, false))
+            .mockResolvedValueOnce(page([taskItem('Remaining task')], 25, false));
+        const refreshTick = Symbol('refresh');
+        const onRefreshComplete = vi.fn();
+        const { rerender } = render(_jsx(TasksPanel, { onRefreshComplete: onRefreshComplete }), { wrapper: Wrapper });
+        await screen.findByText('Task 0');
+        fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+        await screen.findByText('Task 25');
+        fireEvent.click(screen.getByRole('button', { name: 'Next' }));
+        expect(await screen.findByText('Last page task')).toBeInTheDocument();
+        rerender(_jsx(TasksPanel, { refreshTick: refreshTick, onRefreshComplete: onRefreshComplete }));
+        expect(await screen.findByText('Remaining task')).toBeInTheDocument();
+        await waitFor(() => expect(mockTaskSearch).toHaveBeenCalledTimes(5));
+        expect(mockTaskSearch.mock.calls.map(([request]) => request.offset)).toEqual([0, 25, 50, 50, 25]);
+        await waitFor(() => expect(onRefreshComplete).toHaveBeenCalledTimes(1));
+        expect(onRefreshComplete).toHaveBeenCalledWith('tasks-panel', refreshTick);
+    });
+    it('shows an error for failed requests and an empty state when there are no tasks', async () => {
+        mockDispatchApi.mockRejectedValueOnce(new Error('request failed'));
+        const { unmount } = render(_jsx(TasksPanel, {}), { wrapper: Wrapper });
+        expect(await screen.findByText('Unable to load tasks.')).toBeInTheDocument();
+        unmount();
+        mockDispatchApi.mockReset().mockResolvedValue(page([]));
+        render(_jsx(TasksPanel, { taskFilter: "complete" }), { wrapper: Wrapper });
+        expect(await screen.findByText('No Results')).toBeInTheDocument();
+    });
+    it('aborts the request and reports a pending refresh when unmounted', () => {
+        const refreshTick = Symbol('refresh');
+        const onRefreshComplete = vi.fn();
+        mockDispatchApi.mockReturnValue(new Promise(() => { }));
+        const { unmount } = render(_jsx(TasksPanel, { panelId: "tasks-panel-1", refreshTick: refreshTick, onRefreshComplete: onRefreshComplete }), { wrapper: Wrapper });
+        const signal = mockTaskSearch.mock.calls[0][1];
+        unmount();
+        expect(onRefreshComplete).toHaveBeenCalledTimes(1);
+        expect(onRefreshComplete).toHaveBeenCalledWith('tasks-panel-1', refreshTick);
+        expect(signal.aborted).toBe(true);
+    });
+});

package/components/routes/home/ViewCard.d.ts

@@ -2,8 +2,9 @@ import { type FC } from 'react';
 export interface ViewSettings {
     viewId: string;
     limit: number;
+    panelId?: string;
     refreshTick?: symbol;
-    onRefreshComplete?: () => void;
+    onRefreshComplete?: (panelId: string, refreshTick: symbol) => void;
 }
 declare const ViewCard: FC<ViewSettings>;
 export default ViewCard;

package/components/routes/home/ViewCard.js

@@ -62,14 +62,15 @@ const createSignatureFromRecords = (records) => {
     return records.map(createRecordSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
-const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
+const ViewCard = ({ viewId, limit, panelId = viewId, refreshTick, onRefreshComplete }) => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const [recordIds, setRecordIds] = useState([]);
     const [loading, setLoading] = useState(false);
+    const [signatureRefresh, setSignatureRefresh] = useState(0);
     const debounceTimerRef = useRef(null);
-    const isRefreshing = useRef(false);
+    const activeRefreshTick = useRef(undefined);
     const lastSignature = useRef('');
     const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
@@ -79,63 +80,72 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const records = useSelectRecordsByIds(recordIds);
     // Create a stable signature that only changes when relevant fields change
     const recordsSignature = useMemo(() => createSignatureFromRecords(records), [records]);
-    const refreshView = useCallback(async () => {
-        if (!view?.query || isRefreshing.current) {
-            onRefreshComplete?.();
-            return '';
-        }
-        isRefreshing.current = true;
-        try {
-            const res = await dispatchApi(api.v2.search.post((view.indexes ?? ['hit']), {
-                query: view.query,
-                rows: limit,
-                sort: view.sort,
-                filters: view.span ? [`event.created:${convertDateToLucene(view.span)}`] : [],
-                metadata: ['analytic']
-            }));
-            if (!res) {
-                return;
-            }
-            const fetchedRecords = res.items ?? [];
-            loadRecords(fetchedRecords);
-            setRecordIds(fetchedRecords.map(r => r.howler.id));
-            lastSignature.current = createSignatureFromRecords(fetchedRecords);
-        }
-        finally {
-            isRefreshing.current = false;
-            onRefreshComplete?.();
-        }
-    }, [dispatchApi, limit, view?.query, view?.indexes, view?.sort, view?.span, loadRecords, onRefreshComplete]);
     const debouncedRefresh = useCallback(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
         }
         debounceTimerRef.current = setTimeout(() => {
-            void refreshView();
+            setSignatureRefresh(previous => previous + 1);
         }, DEBOUNCE_TIME);
-    }, [refreshView]);
-    useEffect(() => {
-        if (refreshTick) {
-            void refreshView();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [refreshTick]);
+    }, []);
     useEffect(() => {
         void fetchViews([viewId]);
     }, [fetchViews, viewId]);
     useEffect(() => {
+        const controller = new AbortController();
+        let refreshComplete = false;
+        const completeRefresh = () => {
+            if (refreshTick && !refreshComplete) {
+                refreshComplete = true;
+                if (activeRefreshTick.current === refreshTick) {
+                    activeRefreshTick.current = undefined;
+                }
+                onRefreshComplete?.(panelId, refreshTick);
+            }
+        };
+        if (refreshTick) {
+            activeRefreshTick.current = refreshTick;
+        }
         if (!view?.query) {
-            return;
+            completeRefresh();
+            return () => controller.abort();
         }
         const loadingTimeout = setTimeout(() => setLoading(true), 200);
-        void refreshView().finally(() => {
+        const query = view.query;
+        const indexes = view.indexes;
+        const sort = view.sort;
+        const span = view.span;
+        void dispatchApi(api.v2.search.post((indexes ?? ['hit']), {
+            query,
+            rows: limit,
+            sort,
+            filters: span ? [`event.created:${convertDateToLucene(span)}`] : [],
+            metadata: ['analytic']
+        }, controller.signal))
+            .then(response => {
+            if (controller.signal.aborted || !response) {
+                return;
+            }
+            const fetchedRecords = response.items ?? [];
+            loadRecords(fetchedRecords);
+            setRecordIds(fetchedRecords.map(record => record.howler.id));
+            lastSignature.current = createSignatureFromRecords(fetchedRecords);
+        })
+            .catch(() => {
+            // Aborted requests are expected when newer view inputs supersede this search.
+        })
+            .finally(() => {
             clearTimeout(loadingTimeout);
-            setLoading(false);
+            if (!controller.signal.aborted) {
+                setLoading(false);
+                completeRefresh();
+            }
         });
         return () => {
+            controller.abort();
             clearTimeout(loadingTimeout);
         };
-    }, [view?.query, limit, refreshView]);
+    }, [dispatchApi, limit, loadRecords, onRefreshComplete, panelId, refreshTick, signatureRefresh, view]);
     // Monitor hits currently in the view for changes that might affect query results
     useEffect(() => {
         if (!recordsSignature || recordIds.length === 0 || !lastSignature.current) {
@@ -148,13 +158,15 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         debouncedRefresh();
     }, [recordsSignature, recordIds, debouncedRefresh]);
-    useEffect(() => {
-        return () => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-    }, []);
+    useEffect(() => () => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        if (activeRefreshTick.current) {
+            onRefreshComplete?.(panelId, activeRefreshTick.current);
+            activeRefreshTick.current = undefined;
+        }
+    }, [onRefreshComplete, panelId]);
     const onClick = useCallback((query) => navigate('/hits?query=' + query), [navigate]);
     const getSelectedId = useCallback((event) => {
         const target = event.target;

package/components/routes/home/ViewCard.test.js

@@ -113,7 +113,7 @@ describe('ViewCard', () => {
             sort: mockView.sort,
             filters: [`event.created:[now-1M TO now]`],
             metadata: ['analytic']
-        });
+        }, expect.any(AbortSignal));
     });
     it('renders the empty state when the search has no records', async () => {
         mockDispatchApi.mockResolvedValue({ items: [] });
@@ -138,9 +138,35 @@ describe('ViewCard', () => {
         mockDispatchApi.mockResolvedValue({ items: [] });
         const { rerender } = render(_jsx(ViewCard, { viewId: "view-1", limit: 3, refreshTick: Symbol('first'), onRefreshComplete: onRefreshComplete }), { wrapper: Wrapper });
         await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledTimes(1));
-        expect(onRefreshComplete).toHaveBeenCalledTimes(2);
+        expect(onRefreshComplete).toHaveBeenCalledTimes(1);
         rerender(_jsx(ViewCard, { viewId: "view-1", limit: 3, refreshTick: Symbol('second'), onRefreshComplete: onRefreshComplete }));
         await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledTimes(2));
-        expect(onRefreshComplete).toHaveBeenCalledTimes(3);
+        expect(onRefreshComplete).toHaveBeenCalledTimes(2);
+    });
+    it('aborts a superseded search and ignores its late response', async () => {
+        let resolveFirst;
+        let resolveSecond;
+        mockDispatchApi
+            .mockReturnValueOnce(new Promise(resolve => (resolveFirst = resolve)))
+            .mockReturnValueOnce(new Promise(resolve => (resolveSecond = resolve)));
+        const { rerender } = render(_jsx(ViewCard, { viewId: "view-1", limit: 3 }), { wrapper: Wrapper });
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledTimes(1));
+        const firstSignal = mockSearchPost.mock.calls[0][2];
+        rerender(_jsx(ViewCard, { viewId: "view-1", limit: 4 }));
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledTimes(2));
+        expect(firstSignal.aborted).toBe(true);
+        resolveSecond?.({ items: [{ ...hit, howler: { ...hit.howler, id: 'latest-hit' } }] });
+        expect(await screen.findByText('Hit: latest-hit')).toBeInTheDocument();
+        resolveFirst?.({ items: [hit] });
+        await waitFor(() => expect(screen.queryByText('Hit: hit-1')).not.toBeInTheDocument());
+        expect(screen.getByText('Hit: latest-hit')).toBeInTheDocument();
+    });
+    it('aborts its search when unmounted', async () => {
+        mockDispatchApi.mockReturnValue(new Promise(() => { }));
+        const { unmount } = render(_jsx(ViewCard, { viewId: "view-1", limit: 3 }), { wrapper: Wrapper });
+        await waitFor(() => expect(mockDispatchApi).toHaveBeenCalledTimes(1));
+        const signal = mockSearchPost.mock.calls[0][2];
+        unmount();
+        expect(signal.aborted).toBe(true);
     });
 });

package/components/routes/home/ViewRefresh.d.ts

@@ -1,18 +1,23 @@
 /**
  * Imperative handle exposed to the parent via ref.
- * The parent calls `handleRefreshComplete` once each ViewCard finishes its data fetch,
- * allowing ViewRefresh to track how many cards are still in flight.
+ * The parent calls `handleRefreshComplete` once each refreshable panel finishes its data fetch,
+ * allowing ViewRefresh to track how many panels are still in flight.
  */
 export interface ViewRefreshHandle {
-    handleRefreshComplete: () => void;
+    handleRefreshComplete: (panelId: string, refreshTick: symbol) => void;
+    updateViewCardIds: (viewCardIds: string[]) => void;
+    updateRefreshRate: () => void;
 }
 interface ViewRefreshProps {
-    /** Auto-refresh interval in seconds (e.g. 15, 30, 60, 300). */
-    refreshRate: number;
-    /** Number of ViewCards currently on the dashboard. Used to track pending fetches. */
-    viewCardCount: number;
-    /** Called when a refresh cycle begins. Should update `refreshTick` in the parent to signal ViewCards. */
-    onRefresh: () => void;
+    /** Stable refs let the AppBar-registered node read current Home dashboard values. */
+    refreshRateRef: {
+        current: number;
+    };
+    viewCardIdsRef: {
+        current: string[];
+    };
+    /** Called when a refresh cycle begins. Should update `refreshTick` in the parent to signal panels. */
+    onRefresh: (refreshTick: symbol) => void;
 }
 /**
  * Self-contained refresh control that owns the countdown timer and refreshing state.

package/components/routes/home/ViewRefresh.js

@@ -8,50 +8,93 @@ import { useTranslation } from 'react-i18next';
  * Isolating this state here prevents the progress ticker (which fires every `refreshRate * 10`ms)
  * from causing unnecessary re-renders in the parent Home component.
  */
-const ViewRefresh = forwardRef(({ refreshRate, viewCardCount, onRefresh }, ref) => {
+const ViewRefresh = forwardRef(({ refreshRateRef, viewCardIdsRef, onRefresh }, ref) => {
     const { t } = useTranslation();
     const [progress, setProgress] = useState(0);
     const [isRefreshing, setIsRefreshing] = useState(false);
-    const pendingRefreshes = useRef(0);
+    const [refreshRateVersion, setRefreshRateVersion] = useState(0);
+    const pendingRefreshes = useRef(new Set());
+    const registeredCardIds = useRef(new Set());
+    const activeRefreshTick = useRef(undefined);
     const timerRef = useRef(null);
+    useEffect(() => {
+        registeredCardIds.current = new Set(viewCardIdsRef.current);
+    }, [viewCardIdsRef]);
     /**
-     * Called by the parent (via ref) each time a ViewCard finishes fetching.
-     * Clears the refreshing state once all cards have reported back.
+     * Called by the parent (via ref) when a refreshable dashboard panel finishes fetching.
+     * Clears the refreshing state once all pending panels have reported back.
      */
-    const handleRefreshComplete = useCallback(() => {
-        pendingRefreshes.current -= 1;
-        if (pendingRefreshes.current <= 0) {
+    const handleRefreshComplete = useCallback((panelId, refreshTick) => {
+        if (refreshTick !== activeRefreshTick.current || !pendingRefreshes.current.delete(panelId)) {
+            return;
+        }
+        if (pendingRefreshes.current.size === 0) {
+            activeRefreshTick.current = undefined;
             setIsRefreshing(false);
             setProgress(0);
         }
     }, []);
-    // Expose handleRefreshComplete to the parent without leaking the rest of the component's state.
-    useImperativeHandle(ref, () => ({ handleRefreshComplete }), [handleRefreshComplete]);
+    const updateViewCardIds = useCallback((viewCardIds) => {
+        const nextCardIds = new Set(viewCardIds);
+        if (activeRefreshTick.current) {
+            for (const pendingPanelId of pendingRefreshes.current) {
+                if (!nextCardIds.has(pendingPanelId)) {
+                    pendingRefreshes.current.delete(pendingPanelId);
+                }
+            }
+            for (const panelId of nextCardIds) {
+                if (!registeredCardIds.current.has(panelId)) {
+                    pendingRefreshes.current.add(panelId);
+                }
+            }
+            if (pendingRefreshes.current.size === 0) {
+                activeRefreshTick.current = undefined;
+                setIsRefreshing(false);
+                setProgress(0);
+            }
+        }
+        registeredCardIds.current = nextCardIds;
+    }, []);
+    const updateRefreshRate = useCallback(() => {
+        setRefreshRateVersion(version => version + 1);
+    }, []);
+    // Expose completion and synchronization methods without leaking the rest of the component's state.
+    useImperativeHandle(ref, () => ({ handleRefreshComplete, updateViewCardIds, updateRefreshRate }), [
+        handleRefreshComplete,
+        updateRefreshRate,
+        updateViewCardIds
+    ]);
     const triggerRefresh = useCallback(() => {
+        const refreshTick = Symbol();
+        const viewCardIds = viewCardIdsRef.current;
         setIsRefreshing(true);
-        pendingRefreshes.current = viewCardCount;
-        if (viewCardCount === 0) {
+        activeRefreshTick.current = refreshTick;
+        pendingRefreshes.current = new Set(viewCardIds);
+        registeredCardIds.current = new Set(viewCardIds);
+        if (viewCardIds.length === 0) {
+            activeRefreshTick.current = undefined;
             setIsRefreshing(false);
             setProgress(0);
             return;
         }
-        onRefresh();
-    }, [viewCardCount, onRefresh]);
+        onRefresh(refreshTick);
+    }, [onRefresh, viewCardIdsRef]);
     useEffect(() => {
         if (isRefreshing)
             return;
-        if (progress >= 100) {
-            triggerRefresh();
-            return;
-        }
         timerRef.current = setTimeout(() => {
-            setProgress(prev => prev + 1);
-        }, refreshRate * 10);
+            if (progress >= 99) {
+                triggerRefresh();
+            }
+            else {
+                setProgress(currentProgress => currentProgress + 1);
+            }
+        }, refreshRateRef.current * 10);
         return () => {
             if (timerRef.current)
                 clearTimeout(timerRef.current);
         };
-    }, [progress, isRefreshing, refreshRate, triggerRefresh]);
+    }, [progress, isRefreshing, refreshRateRef, refreshRateVersion, triggerRefresh]);
     return (_jsxs(Box, { sx: { position: 'relative', display: 'inline-flex' }, children: [isRefreshing ? (_jsx(CircularProgress, { variant: "indeterminate", size: 32 })) : (_jsx(CircularProgress, { variant: "determinate", value: progress, size: 32 })), _jsx(Box, { sx: {
                     top: 0,
                     left: 0,