fix(sync-messaging): Have "Looking for messages..." update properly

Summary:
Makes these messages update even if the user doesn't force a
re-render by switching perspectives.

Test Plan: tested manually

Reviewers: evan, juan

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D3715

internal_packages/thread-list/lib/thread-list.cjsx

@@ -42,13 +42,18 @@ class ThreadList extends React.Component
   constructor: (@props) ->
     @state =
       style: 'unknown'
+      syncing: false
 
   componentDidMount: =>
+    @unsub = NylasSyncStatusStore.listen( => @setState
+      syncing: FocusedPerspectiveStore.current().hasSyncingCategories()
+    )
     window.addEventListener('resize', @_onResize, true)
     ReactDOM.findDOMNode(@).addEventListener('contextmenu', @_onShowContextMenu)
     @_onResize()
 
   componentWillUnmount: =>
+    @unsub()
     window.removeEventListener('resize', @_onResize, true)
     ReactDOM.findDOMNode(@).removeEventListener('contextmenu', @_onShowContextMenu)
 
@@ -83,9 +88,9 @@ class ThreadList extends React.Component
     'thread-list:select-starred': @_onSelectStarred
     'thread-list:select-unstarred': @_onSelectUnstarred
 
-  _renderFooterContent: ->
+  _getFooter: ->
+    return null unless @state.syncing
     return null if ThreadListStore.dataSource().count() <= 0
-    return null unless FocusedPerspectiveStore.current().hasSyncingCategories()
     return <SyncingListState />
 
   render: ->
@@ -97,7 +102,7 @@ class ThreadList extends React.Component
       itemHeight = 85
 
     <FluxContainer
-      renderFooterContent={@_renderFooterContent}
+      footer={@_getFooter()}
       stores=[ThreadListStore]
       getStateFromStores={ -> dataSource: ThreadListStore.dataSource() }>
       <FocusContainer collection="thread">

src/components/empty-list-state.cjsx

@@ -151,17 +151,6 @@ class EmptyListState extends React.Component
       @setState({rect})
 
   _getStateFromStores: ->
-    currentPerspective = FocusedPerspectiveStore.current()
-    accountIds = currentPerspective.accountIds
-    if accountIds.length == 1
-      accountId = accountIds[0]
-      categories = currentPerspective.categories
-      folderName = null
-      if categories.length == 1 and categories[0].object == 'folder'
-        folderName = categories[0].displayName
-      syncing = !NylasSyncStatusStore.isSyncCompleteForAccount(accountId, folderName)
-    else
-      syncing = NylasSyncStatusStore.busy()
-    return syncing: syncing
+    return syncing: FocusedPerspectiveStore.current().hasSyncingCategories()
 
 module.exports = EmptyListState

src/components/list-tabular.cjsx

@@ -22,10 +22,10 @@ class ListTabular extends React.Component
     onSelect: React.PropTypes.func
     onClick: React.PropTypes.func
     onDoubleClick: React.PropTypes.func
-    renderFooterContent: React.PropTypes.func
+    footer: React.PropTypes.node
 
   @defaultProps =
-    renderFooterContent: => null
+    footer: => false
 
   constructor: (@props) ->
     if not @props.itemHeight
@@ -190,7 +190,7 @@ class ListTabular extends React.Component
         >
           {@_rows()}
         </div>
-        <div className="footer">{@props.renderFooterContent()}</div>
+        <div className="footer">{@props.footer}</div>
       </ScrollRegion>
       <Spinner visible={!@state.loaded and @state.empty} />
       {emptyElement}