Offline State
Offline state panel listing what still works locally and what is paused until reconnection, with a guarantee that queued drafts are never lost.
Offline state panel listing what still works locally and what is paused until reconnection, with a guarantee that queued drafts are never lost.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Offline State is the panel Acme shows when no internet connection is detected. It splits into two columns: Still works on the left lists cached views and pages you have already opened, drafts that save locally every 30 seconds, and browsing your recent activity feed. Paused until you reconnect on the right names syncing changes to teammates, live updates on shared documents and tasks, and sending or receiving notifications. A muted footer note commits to the reconnect behavior: every local save is queued and replays in the order you made it.
Two const arrays drive the columns. The honest note at the bottom turns a frustrating moment into a trust signal: nothing is lost because the queue is explicit.
Reach for this block inside a network-detection wrapper, displayed when navigator.onLine is false or your websocket drops. Wire the reconnect event to dismiss it automatically rather than making the user poll.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace-wide offline banner. Other offline states:
Tip: name exactly what is paused, a generic you are offline message leaves users guessing whether their last action saved.