dusk-network / dusk-network/duskit

feat(components): expose property to pause the auto-refresh timer in `RelativeTime`

Open
#261 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

need:feedback
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. Rerender is mounted and the internal timer ticks normally.
  • "paused": The component is dynamically suspended. Rerender remains mounted (preserving the DOM tree and preventing thrashing), but the internal timer is explicitly halted.
  • "none": The component is entirely static. Rerender is 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.