-
-
Notifications
You must be signed in to change notification settings - Fork 5.6k
Desktop, Mobile: Implement a dirty state indicator which shows when there are pending outgoing changes to be synced #13312
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: dev
Are you sure you want to change the base?
Conversation
…n there is a pending sync
How about adding a tooltip on hover with an explanation? To be honest, I don't think I would know what the dot means if I was just an average user and didn't follow the development of the feature. 😅 |
Nice suggestion. On desktop I've now added a tooltip which says 'Not all changes have been synced' when the indicator is present. On mobile you can't really add a tooltip, but to be honest for the average user I wouldn't expect them to see the indicator in most cases (due to the short sync delay and the side bar is hidden unless you open it on the main screen), unless they carefully check the sync is completed all the time. But if the indicator persists then it probably is a good time for the user to turn to the forum for support anyway, if they don't know how to diagnose sync issues themselves. |
Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
I wonder if there should be a wider discussion with users regarding this change. Your reasoning makes sense but I'm not sure we really want to have this dot there. |
@laurent22 What about if we add a configuration setting for this? Maybe under Synchronisation, add a setting called 'Show indicator when not all changes are synced' just below the sync interval setting. |
@laurent22 I've updated the PR as described. Let me know what you think If it is specifically it being a dot that you think is too vague, a potential alternative might be to use an up arrow, maybe like this?: This would be similar to common UI's for syncing to remote repositories with version control. It won't support showing an arrow down for when there are incoming changes as well, but then neither will Git detect incoming changes unless you do a fetch |
As mentioned in this thread https://discourse.joplinapp.org/t/one-enhancement-request-for-syncing/47337, on Joplin desktop, the 'sync as you type' behaviour has a 15 second delay between making a change and the sync automatically running. This is to reduce data usage and avoid distracting the user by having the sync icon constantly stop and start spinning. However, this does mean that if the user abruptly quits the app, there may be un-synced changes which could lead to conflicts. In order to help prevent this from happening for this reason and various other reasons, I have added an indicator which shows whenever there are un-synced (pending) changes, as per a suggestion in the thread. This takes the form of a dot on the right side of the sync button text. Dots are commonly used in apps in many different ways to indicate a current status, an update or a dirty state. This particular presentation is inspired by the dirty state indicator of modified files in VS Code, as what is essentially being represented is a dirty state of the Joplin client with regards to sync items. Using this implementation also makes it easy to blend with any Joplin theme in use, due to using the existing colour of the sync button content.
The dot indicator appears whenever a change is made (which schedules a sync in 15 seconds on desktop, or 1 second on mobile) and also whenever the sync completes (whether success / failure / cancelled) if there are still un-synced outgoing changes. The dot indicator is removed completely while the sync is in progress. I have ensured there is no change in the vertical and horizontal alignment when the dot indicator becomes visible, with the exception of the horizontal alignment on the desktop app (which was difficult due to the horizontal centering of the button contents), but in this case the change in alignment I have kept to a minimum and it is barely noticeable.
Justification
While this was originally intended to help with dealing with potential un-synced items due to the 15 second sync delay on Joplin desktop, the change is also useful for other scenarios and benefits the mobile app as well. There are number of uncommon scenarios within the Synchronizer logic whereby outgoing changes do not get synced, yet the synchronizer reports a successful sync, rather than showing an error. In most cases this will be due to temporary network issues, or simply syncing during a period of an internet outage, which results in a generic network error that is not reported to the UI. But in a couple of cases it can be more terminal issue such as a server being down or remote items having a modified date which is in the future. In these cases, it is beneficial to have the dot indicator as a non intrusive warning sign that something might be wrong with the server or the user's profile, if the dot indicator still persists after multiple automatic or manual syncs.
Limitations
When starting Joplin, the indicator will only appear after the first sync runs, but this will happen automatically within a few seconds of opening the app
Testing
Screenshot on desktop:

Screenshot on mobile:

Video of main tests on desktop:
https://github.com/user-attachments/assets/51c65d9c-9a9a-4a5e-b72f-a354d5d7c5ab
Video of basic test on mobile:
https://github.com/user-attachments/assets/1ce5fe8c-7871-4ba7-920d-a2d5f9ec66ed
Test cases verified: