opportunato / logux-status

Display Logux synchronization status in browser

Logux Status

UX best practices to report Logux synchronization status to user.

var Client = require('logux-client/client')
var client = new Client({ … })

var attention = require('logux-status/attention')
var confirm = require('logux-status/confirm')
var log = require('logux-status/log')

attention(client)
confirm(client, i18n.t('loguxWarn'))
log(client)

attention

Highlight tab on synchronization error to notify user.

var attention = require('logux-status/attention')
attention(client)

User could switch current tab in the middle of synchronization process. So error could be returned from server when website is in background tab.

User expect correct synchronization until we told about a error. So good UX must notify user, return her/him to website tab and show error.

It will add * to tab title on error event. Because of changed title, browser will highlight tab until user will open it.

It return a function to disable itself.

var unbind = attention(client)
function disableLogux() {
  unbind()
}

confirm

Show confirm popup, when user close tab with non-synchronized actions.

var confirm = require('logux-status/confirm')
confirm(client)

User could close app tab in offline or in the middle of synchronization process. So good UX must notify user and request confirmation to close the tab.

Use optional second argument to specify a text of warning.

confirm(client, 'Post does not saved to server. Are you sure to leave?')

It return a function to disable itself.

var unbind = confirm(client)
function disableLogux() {
  unbind()
}

log

Display Logux events in browser console.

var log = require('logux-status/log')
log(client)

This feature will be useful for application developer to understand Logux life cycle and debug errors.

In second argument you can disable some message types. Possible types are: state, error, add, clean.

log(client, { add: false })

It return a function to disable itself.

var unbind = log(client)
function disableLogux() {
  unbind()
}