Canvas sync states

SketchSystems.spec

Canvas sync states
  Loading
    loaded -> Synced
    disconnected -> Offline
  Synced
    changed -> Syncing
    disconnected -> Offline
  Syncing
    synced -> Synced
    disconnected -> Offline
  Offline
    connected -> Syncing
    wait -> Disconnected
  Disconnected
    connected -> Disconnected Syncing
  Disconnected Syncing
    synced -> Reconnected
    disconnected -> Disconnected
  Reconnected
    wait -> Synced
    disconnected -> Offline

SketchSystems_prototype.js

const states = {
  'Loading': ['', ''],
  'Synced': ['☑️ ', 'Changes saved'],
  'Syncing': ['🔄 ', 'Saving...'],
  'Offline': ['⛈ ', 'You’re offline. We’ll sync changes when you’re back.'],
  'Disconnected': ['⛈ ', 'You’re offline. We’ll sync changes when you’re back.', 'You’re offline. We’ll sync changes when you’re back.'],
  'Disconnected Syncing': ['🔄 ', 'Reconnecting...'],
  'Reconnected': ['☑️ ', 'Reconnected', 'You are back!'],
}

function render(model){
  let current_state_name = model.active_states[0].name;
  const state = states[current_state_name];
  
  return $("div", {}, [
    $("div", { style: { margin: 15 } }, [state[0], [state[1]]]),
    state[2] ? $("div", { style: { margin: '0 auto', width: '200px', color: 'white', background: 'black', padding: 3 } }, [state[2]]): null
  ])
}