vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

swarm-ui: shared refresh-interval polling control

Browse source 
Closes #3446.

New ui/refresh-interval/RefreshInterval — a RefreshIntervalPicker
(off/10s/30s/1m preset select) plus a useRefreshInterval hook that
polls on that cadence, pausing while the document is hidden and
resyncing immediately on becoming visible again (same pattern
RelativeTime already uses). The hook keeps the caller's onTick fresh
via a ref rather than an effect dependency, so a new closure each
render doesn't re-arm the timer.

HivesPage wires it in: defaults to 30s (no inputs on this page to
interrupt, and the point of the feature is not needing a manual
reload), replacing the old fetch-once-at-mount effect. A successful
refresh also clears any previous fetch error instead of leaving a
stale failure on screen after the data's recovered.

Verified: tsc clean, build succeeds, screenshotted the hives page
(auto-loads on mount, picker defaults to 30s) and the components page
demo.
This commit is contained in:
iris 2026-08-18 22:19:00 +02:00 • committed by mara
commit e270ba309b
3 changed files with 139 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -9,6 +9,7 @@ import { useState } from 'preact/hooks';
import type { ComponentChildren } from 'preact';
import { Panel } from '../ui/panel/Panel.js';
import { RelativeTime } from '../ui/relative-time/RelativeTime.js';
import { RefreshIntervalPicker, type RefreshIntervalMs } from '../ui/refresh-interval/RefreshInterval.js';
import { StatusChip, type ChipTone } from '../ui/status-chip/StatusChip.js';
import { Table, type TableColumn } from '../ui/table/Table.js';
import { TextField } from '../ui/text-field/TextField.js';
@ -80,6 +81,11 @@ function SelectFieldSample() {
);
}
function RefreshIntervalPickerSample() {
const [value, setValue] = useState<RefreshIntervalMs>(30_000);
return <RefreshIntervalPicker id="sample-refresh-interval" value={value} onChange={setValue} />;
}
export function ComponentsPage() {
return (
<Panel title="components">
@ -127,6 +133,12 @@ export function ComponentsPage() {
</div>
</Section>
<Section title="RefreshIntervalPicker">
<Sample label="editable">
<RefreshIntervalPickerSample />
</Sample>
</Section>
<Section title="TextField">
<Sample label="editable">
<TextFieldSample />