fix(multiselect-list): Only show loading dots when list source is empty

Fixes T1118

internal_packages/composer/lib/composer-view.cjsx

@@ -240,7 +240,7 @@ class ComposerView extends React.Component
     # If they're hidden, shift-tab between fields breaks.
     fields = []
     fields.push(
-      <div>
+      <div key="to">
         <div className="composer-participant-actions">
           <span className="header-action"
                 style={display: @state.showcc and 'none' or 'inline'}
@@ -265,7 +265,6 @@ class ComposerView extends React.Component
         </div>
         <ParticipantsTextField
           ref="textFieldTo"
-          key="to"
           field='to'
           change={@_onChangeParticipants}
           participants={to: @state['to'], cc: @state['cc'], bcc: @state['bcc']}

src/components/multiselect-list.cjsx

@@ -97,11 +97,9 @@ class MultiselectList extends React.Component
     # BAD:   onSelect={ (item) -> Actions.focusThread(item) }
     # GOOD:  onSelect={@_onSelectItem}
     #
-    className = @props.className
-    className += " ready" if @state.ready
-
     otherProps = _.omit(@props, _.keys(@constructor.propTypes))
 
+    className = @props.className
     if @state.dataView and @state.handler
       className += " " + @state.handler.cssClass()
 
@@ -117,9 +115,11 @@ class MultiselectList extends React.Component
       emptyElement = []
       if @props.emptyComponent
         emptyElement = <@props.emptyComponent
-          visible={@state.ready && @state.dataView.count() is 0}
+          visible={@state.loaded and @state.empty}
           dataView={@state.dataView} />
 
+      spinnerElement = <Spinner visible={!@state.loaded and @state.empty} />
+
       <div className={className} {...otherProps}>
         <ListTabular
           ref="list"
@@ -130,12 +130,12 @@ class MultiselectList extends React.Component
           itemHeight={@props.itemHeight}
           onSelect={@_onClickItem}
           onDoubleClick={@props.onDoubleClick} />
-        <Spinner visible={!@state.ready} />
+        {spinnerElement}
         {emptyElement}
       </div>
     else
       <div className={className} {...otherProps}>
-        <Spinner visible={@state.ready is false} />
+        <Spinner visible={true} />
       </div>
 
   _onClickItem: (item, event) =>
@@ -210,12 +210,13 @@ class MultiselectList extends React.Component
 
     dataView: view
     handler: handler
-    ready: view.loaded()
     columns: props.columns
     computedColumns: computedColumns
     layoutMode: layoutMode
     selectedIds: view.selection.ids()
     focusedId: FocusedContentStore.focusedId(props.collection)
     keyboardCursorId: FocusedContentStore.keyboardCursorId(props.collection)
+    loaded: view.loaded()
+    empty: view.empty()
 
 module.exports = MultiselectList

src/flux/stores/model-view.coffee

@@ -30,6 +30,9 @@ class ModelView
         return false
     true
 
+  empty: ->
+    @count() <= 0
+    
   get: (idx) ->
     unless _.isNumber(idx)
       throw new Error("ModelView.get() takes a numeric index. Maybe you meant getById()?")