Use case or problem
i cannot tell when obsidian is not synced/hasn’t synced on android
Proposed solution
add a syncing indicator
similar to the one on the desktop app.
is there a reason why this feature hasn’t been added? it would seem like an easy feature to implement.
There are infinite possible features and only a handful of developers. Not all users use Sync and it’s already possible to check the sync status by swiping open the right sidebar (which has no visible control on phones — argh! 
). And the small screen space of phones forces tough decisions.
did you mean swiping to the right which opens the drawer. the drawer opens from the left. i don’t see the syncing indicator in the drawer.
No, swipe open from the right side — there’s another sidebar.
Swiping is the only way to open it (other than the “Toggle right sidebar” command). There’s no button for it. Which, yes, is annoying.
thanks, solved my issue
If you’d like the icon always visible instead of hidden in the sidebar, see the snippet and its variants in this thread.
If you’d like to set separate values for iPad and iPhone, on each of the starting lines with :is, you can remove both conditions (.is-mobile, .is-phone) and use just (.is-phone) or (.is-tablet) to distinguish between the two. You’ll need to duplicate the code. This works with dynamically resizing the window with stage manager on iPad, when it is switches to a phone size it uses the correct one.
1 Like
I added the snippet to rotate the icon while syncing. I am satisfied, especially on mobile, as it is now easier to detect the sync status.
(I changed the padding of .sync-status-icon to 0 for smooth animation. So you need to adjust the position of the icon again).
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
padding: 0;
}
/* Animation */
.sync-status-icon.mod-working{
animation: linear 2s sync_working infinite;
}
@keyframes sync_working {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
I leave here the CSS classes for each icons related to Obsidian Sync. You should be able to change the icons to your favorites and customize them further!
/* Icons */
.sync-status-icon.mod-success{}
.sync-status-icon.mod-working{}
.sync-status-icon.mod-error{}
3 Likes
For convenience, here is my current full version of the snippet, which incorporates changes discussed above:
/*
Display sync icon on mobile while drawer is closed.
Numbers may need to be tweaked for each device.
Original version kindly provided by sailKite. "no warranties for damages, this is gonna be scuffed" https://discord.com/channels/686053708261228577/702656734631821413/1078468316592615514
*/
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}
:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}
:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 12px;
}
/* Move 3-dot menu to make room for Sync icon. (Courtesy of jijo https://forum.obsidian.md/t/feature-make-sync-icon-always-visible/31780/12) */
:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 32px;
}
:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 23px;
}
(I’m also using snowynest’s animation from the post before this one but I keep it in a separate snippet.)
Occasionally the icon gets layered on top of the menu icon, but rotating the device fixes it.
1 Like
+1 This is a must have for folks using sync.
I would prefer sync work in the background, but since that’s apparently impossible (for now) this is a much needed visual indicator.
I would also love to be able to force a sync since sometimes it seems to hang and take some time before a sync is initiated.
The CSS snippet is super useful! Have you been able to work out why the icon occasionally gets layered on top of the menu icon? That’s happening on my iPhone and is a bit annoying. It’s otherwise pretty perfect.
It seems to happen sometimes after I open the sidebar, so it may be related to the part that moves the menu aside. It’s definitely annoying but because it’s easy to fix I haven’t put much effort into figuring out exactly what triggers it. (Figuring out a proper fix is likely beyond me, so I’d need good info to bring to someone who could potentially fix it.)
I think I fixed it! The original code was just applying when the “drawer” was closed. Adding the code below also applies it when the drawer is open so the icon stays in place. The problem was the icon was disappearing which reverted the other icons back to their original positions. I prefer having it always visible, which this accomplishes.
Also, I love Obsidian. Being able to edit the CCS and have that be a built in feature is just awesome. The mobile app is doing exactly what I need now. Thanks for getting the ball rolling on this one!
Note: I did tweak the top px spacing on mine compared with your CSS above so make sure yours matches up, otherwise it’ll wiggle.
/*
Display sync icon on mobile while drawer is open. Numbers may need adjusting depending on device.
*/
:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}
:is(.is-mobile) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}
:is(.is-phone) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}
OK, so it looks like you changed every instance of
.workspace:not(:has(.workspace-drawer-backdrop))
to
.workspace:has(.workspace-drawer-backdrop)
Is that right, and is that everything?
Yup! That’s the only change. You’ll need both the “not” version and the “has” version included in the CSS to make it apply with the drawer open and closed.
1 Like
Ah, that would explain why replacing it broke things.
Having both fixes the prior breakage, but the sidebar flies across the screen when I open it.
Edit: Looks like this is causing an issue with pulling out the right drawer, so still not perfect! Will keep messing around with it and let you know if I solve it. Maybe somebody else can chime in with a fix as well.
Weird! Here’s my full CSS file which is working well on my iPhone:
/*
Display sync icon on mobile while drawer is closed. Numbers may need adjusting depending on device.
*/
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}
:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}
:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}
/*
Display sync icon on mobile while drawer is open. Numbers may need adjusting depending on device.
*/
:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}
:is(.is-mobile, .is-phone) .workspace:has(.workspace-drawer-backdrop) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}
:is(.is-mobile) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}
:is(.is-phone) .workspace:has(.workspace-drawer-backdrop) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}
/*
Move 3-dot menu to make room for Sync icon.
*/
:is(.is-mobile) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 32px;
}
:is(.is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .view-actions {
padding-right: 27px;
}
1 Like
Here’s my latest code which fixes the error pulling out the right drawer. It’s working as expected on my iPhone.
This version does not display the sync icon when the right drawer is pulled out - it’s as if the icon fully moves to the main screen. The only minor bug is the icon flickers when sliding the right drawer out of view. I don’t use the right drawer much on mobile so this isn’t a big issue for me.
I’m also not using the animation CSS because I find it can be a bit annoying if I’m taking notes somewhere I don’t have cell service. So if you want that it would need to be added separately.
/*
Always display sync icon on mobile and move 3-dot menu to make room.
Numbers may need adjusting depending on device.
*/
:is(.is-mobile, .is-phone) .workspace:not(:has(.workspace-drawer-backdrop)) .workspace-drawer.mod-right {
display: flex !important;
overflow: visible;
left: 100%;
}
:is(.is-mobile, .is-phone) .workspace-drawer.mod-right .workspace-drawer-inner {
overflow: visible;
}
:is(.is-mobile) .sync-status-icon {
position: absolute;
left: calc(-1 * 52px); /*74*/
top: 52px;
}
:is(.is-phone) .sync-status-icon {
left: calc(-1 * 46px); /*74*/
top: 9px;
}
:is(.is-mobile) .view-actions {
padding-right: 32px;
}
:is(.is-phone) .view-actions {
padding-right: 28px;
}