DEV Community

ZedTuX
ZedTuX

Posted on

Managing data update and cleanup from a local-first app

While developing Beacon I had to face this data cleanup challenge:

When an issue/MR is closed/merged, Beacon should not show it to the dev anymore since Beacon shows ongoing work, but removing would surprise the user and gives a bad experience.

First, how is managed new data?

You got assigned to an issue, and you pushed the sync button. As soon as the sync is over, the UI is refreshed and shows your new issue with a blue left border to highlight it:

Newly imported issue in Beacon

Second, how is managed data update?

Now this issue got some new comments, labels and assignee have changed and you synchronized in Beacon.

Here we need a different way to highlight that issue, a more discrete one that just tell to the user there are updates, but potentially not urgent to check now.

I did this by adding a dot on the left of issue/MR title styled like a little blueish LED light which is "ON" when there are updates, or "OFF":

Updated issue in Beacon

And now, closed/merged issues/MRs

Beacon shows them dimmed for 7 days, at the bottom of the panel with the reason for being here (unassigned, merged, closed and so on).

Unassigned issue in Beacon

But now let's say you have plenty of issues or MRs, how to get notified that you have those items at the bottom of the list?

I opted for a clickable discrete banner at the bottom of the list that scrolls to the beginning of the to-be-deleted-items section:

Scrolling to items to be deleted in Beacon

What do you think?

I'm satisfied the way it works, but I need feedback from you!

If you see a better way to handle data update/removal on local-first app I would be more than happy to hear from you.

Top comments (0)