import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('AppStore')
@observer
export default class NewTabLink extends Component {
  render () {
    const { saved, autoSaveHandle } = this.props.AppStore
    const text = (autoSaveHandle && 'Saving...') || (saved && 'Draft saved')
    return (
      <div className='pure-u-1-6 include__body'>
        <span>
          {text}
        </span>
      </div>
    )
  }
}

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import { CircularProgress } from 'material-ui/Progress'
import { InputLabel } from 'material-ui/Input'

@inject('AppStore')
@observer
export default class NewTabLink extends Component {
  render () {
    const { saved, autoSaveHandle } = this.props.AppStore
    const content = (
      autoSaveHandle && <CircularProgress size={24} />
    ) || (
      saved && <InputLabel>Draft saved</InputLabel>
    )
    return (
      <div>
        {content}
      </div>
    )
  }
}

Use CircularProgress to indicate saving
Use CircularProgress to indicate saving
