Overview

Consume a provided live metrics store with useSyncExternalStore and orchestrate its polling lifecycle, tab visibility, and UI states.

Requirements

• The dashboard reads its data from the provided store with useSyncExternalStore (dashboardStore.subscribe and dashboardStore.getSnapshot); store.ts is hidden and must be used as-is.
• While the first request is in flight, the status (data-testid="status") reads Updating…, the skeleton (data-testid="dashboard-skeleton") is visible, and no metric cards are rendered.
• After the first successful response, the status reads Live and the dashboard renders four metric cards: data-testid="metric-active-users", metric-revenue, metric-requests, and metric-error-rate, each showing its value in data-testid="metric-<id>-value".
• The last successful update is displayed in data-testid="last-updated" with the format Updated at HH:MM:SS.
• Polling starts when the dashboard mounts on a visible document, so the cards update without user interaction.
• While a later poll (automatic or manual) is in flight on a visible document, the status reads Updating… and returns to Live when it succeeds, keeping the current cards on screen instead of the skeleton.
• Polling stops when the dashboard unmounts.
• The refresh button (data-testid="refresh") fetches immediately instead of waiting for the next interval, keeping the previous cards visible while the request is in flight.
• The refresh button is disabled while the status is Updating….
• When a request fails, the status reads Error and data-testid="error-message" contains the failure message.
• After a failure, the last successful metric values stay on screen.
• Polling retries on the next interval after a failure.
• When the document becomes hidden, the status reads Paused and no further polling requests are made.
• When the document becomes visible again, the dashboard refreshes immediately and resumes polling.

Notes

• The provided store.ts is hidden on purpose. It exports the dashboardStore singleton with subscribe, getSnapshot, start, refresh, pause, and resume; Components.tsx, data.ts, and types.ts are read-only.
• getSnapshot returns the current snapshot. Pass it directly to useSyncExternalStore; do not copy the data into useState or wrap it in a function that builds a new object.
• start returns the cleanup function that stops polling. The effect that starts the dashboard must return it.
• React StrictMode mounts effects twice in development. Keep that in mind when an effect starts a timer.
• Pausing is not only about stopping the interval; think about what to do with a request that is already in flight.
• The Page Visibility API exposes whether the tab is hidden, and the tests simulate that state.
• APIs: useSyncExternalStore, Page Visibility API.

Tests

1. shows the skeleton and the updating status on mount
2. renders the four metrics after the first fetch
3. shows the time of the last successful update
4. polls every five seconds and updates the metrics
5. refreshes immediately when the refresh button is clicked
6. shows an error and keeps the last successful data
7. retries on the next interval after an error
8. pauses polling while the tab is hidden
9. refreshes and resumes polling when the tab becomes visible
10. stops polling when the dashboard unmounts