AddThisFeature

Stale Data Indicator

Tell people when the screen is out of date, and give them a safe way to refresh.

moderate Security & Reliability

What it adds

A visible marker of data age on cached or background-refreshed screens, with a manual refresh.

What your agent is told to do

6
  1. 1

    Find the screens serving cached or polled data and record when each was last successfully fetched.

  2. 2

    Show the age only once it matters. A freshness label on data that is two seconds old is noise.

  3. 3

    Distinguish three states clearly: cached and ageing, refresh failed, and offline. They call for different copy and different actions.

  4. 4

    Give the user a manual refresh that re-runs the fetch for that view rather than reloading the page.

  5. 5

    Do not silently replace what is on screen while the user is reading or editing it. Fetch, then offer the update.

  6. 6

    Do not auto-refresh a background tab on a timer; refresh when it becomes visible again.

Edge cases it handles

6
  • A refresh must never discard unsaved local edits. Hold the new data until the form is clean or the user chooses.
  • Repeated clicks on refresh must not spawn parallel requests; disable the control while one is in flight.
  • Timestamps must render in the user's locale and time zone, not the server's.
  • A failed refresh must keep showing the old data with a warning, not blank the view.
  • Do not mark data stale purely because a websocket dropped, if the underlying record has not changed.
  • A device with a badly wrong clock must not produce ages in the future.

Definition of done

8
  • Cached screens show when the data was last fetched.
  • Stale, failed, and offline are visually and textually distinct.
  • Manual refresh re-fetches the view without a full page reload.
  • Unsaved edits survive a refresh.
  • Concurrent refresh requests are prevented.
  • Timestamps respect the user's locale and time zone.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.