dusk-network / dusk-network/duskit
feat(components): expose property to pause the auto-refresh timer in `RelativeTime`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 2
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Description:
Currently, the RelativeTime component automatically updates its text when autoRefresh is true. While it smartly scales the update interval based on the current time unit, the timer keeps running indefinitely, even if the component is entirely off-screen or hidden by CSS.
We deliberately ruled out adding an internal IntersectionObserver. A low-level formatting component has no business spying on the viewport, and attaching an observer to every single timestamp in a crowded inbox would degrade performance rather than save it.
Same goes for a visibilitychange handler.
Both things are responsibility of the consumer, not of the RelativeTime component.
Proposed Solution:
Introduce a boolean property (e.g., isPaused or paused) that allows the consumer to manually suspend the internal timer. This delegates the lifecycle control to the parent component. It paves the way for future performance optimizations, such as virtualized lists, where the parent can explicitly pause the timers of off-screen components without unmounting them completely.
Why autoRefresh = false is not enough:
While setting a boolean autoRefresh to false successfully stops the timer, it does so by physically unmounting the Rerender component, shifting the execution to the {:else} block. If the consumer passes heavy custom markup into the default slot, this conditional toggle destroys the entire DOM tree, triggers the garbage collector, and rebuilds the nodes from scratch when toggled back. In dense interfaces like virtualized lists, this continuous destruction and recreation (DOM thrashing) severely degrades CPU performance, entirely defeating the purpose of pausing the timer to save resources. We need to freeze the metronome's logic while keeping the DOM infrastructure completely intact.
New Proposed Solution:
Instead of adding a redundant boolean property, transform the existing autoRefresh property from a boolean into a strict state machine using a string union: "active" | "paused" | "none".
"active": The component is dynamic.Rerenderis mounted and the internal timer ticks normally."paused": The component is dynamically suspended.Rerenderremains mounted (preserving the DOM tree and preventing thrashing), but the internal timer is explicitly halted."none": The component is entirely static.Rerenderis never mounted, avoiding setup costs.
BREAKING CHANGE:
This change alters the component's public API. Consuming applications currently passing boolean values (autoRefresh={true} or autoRefresh={false}) will need to migrate to the new string literal types.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the RelativeTime component and trace how its autoRefresh property controls the Rerender component and timer lifecycle. Verify the behavior for the active, paused, and none states, including preservation of custom slot content and compatibility implications for existing boolean values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100