Note list: Distinguish loading from empty states

Alternative idea to #1649

There are a few times when we boot the app and our list of notes is
empty because we haven't received udpates from the server yet. This
happens on intial app boot, immediately after authorizing, and when
we lose our local copy of the notes from `IndexedDB`.

During these times we're showing that there are no notes in the account
which is misleading. In this patch we're starting with a `null` value
for the notes so that we can distinguish between "there are no notes
in the account" and "we haven yet to determine which notes are in the
account."

In comparison to #1649 we're using a tri-state value for `notes` instead
of introducing an additional flag which must be kept in sync with
`notes`.

RELEASE-NOTES.txt

@@ -6,6 +6,7 @@
 
  - Add ability to select system as a theme option and make it the default
  - Added support for the unicode bullet • in list items
+ - Display a notice that notes are loading when notes are loading
 
 ### Fixes
 

lib/flux/app-state.js

@@ -34,7 +34,7 @@ export const actionMap = new ActionMap({
     filter: '',
     selectedNoteId: null,
     previousIndex: -1,
-    notes: [],
+    notes: null,
     tags: [],
     revision: null,
     showTrash: false,
@@ -54,7 +54,7 @@ export const actionMap = new ActionMap({
   handlers: {
     authChanged(state) {
       return update(state, {
-        notes: { $set: [] },
+        notes: { $set: null },
         tags: { $set: [] },
         dialogs: { $set: [] },
       });

lib/note-list/index.jsx

@@ -329,6 +329,7 @@ export class NoteList extends Component {
   render() {
     const {
       filter,
+      hasLoaded,
       selectedNoteId,
       onNoteOpened,
       onSelectNote,
@@ -368,7 +369,7 @@ export class NoteList extends Component {
     return (
       <div className={classNames('note-list', { 'is-empty': isEmptyList })}>
         {isEmptyList ? (
-          <span className="note-list-placeholder">No Notes</span>
+          <span className="note-list-placeholder">{ hasLoaded ? 'No Notes' : 'Loading Notes'}</span>
         ) : (
           <Fragment>
             <div className={listItemsClasses}>
@@ -453,6 +454,7 @@ const mapStateToProps = ({ appState: state, settings: { noteDisplay } }) => {
 
   return {
     filter: state.filter,
+    hasLoaded: state.notes !== null,
     nextNote,
     noteDisplay,
     notes: filteredNotes,

lib/utils/filter-notes.js

@@ -107,6 +107,10 @@ export default function filterNotes(state, notesArray = null) {
 
   const notesToFilter = notesArray ? notesArray : notes;
 
+  if ( null === notesToFilter ) {
+    return [];
+  }
+
   return notesToFilter.filter(
     overEvery([
       matchesTrashView(showTrash),