I'm trying to figure out what elements to in an alert show when a web application is offline.
Gmail shows all three elements I'm considering: the Status, a Reconnect Countdown, and a Manual Reconnect option.
Trello has a Status message and reconnects quickly (a few seconds), skipping the Countdown and Manual Reconnect.
Toggl has the best implementation I've seen. Their alert displays the Status and a Manual Reconnect link.
And next to unsynced additions they show an alert icon. Hovering on the icon shows a message explaining that the item is unsynced, and clicking the icon attempts to sync the item.
I like the idea of having a Manual Reconnect option: it gives the user a sense of agency if they are back online and don't want to wait for the automatic reconnect attempt. This is my current alert:
What I'm trying to figure out is whether the Reconnect Countdown (in my alert, the "Checking in…" line) is useful or whether it's unnecessary clutter? The alert is responsive and I hide the countdown on mobile. I'm trying to squeeze the 'Reconnect now' link onto mobile though.