Merge pull request #43 from kadirahq/loading-for-comments

Add a loading icon for loading comments for the first time.
storybookjs · Oct 17, 2016 · fa3b4d8 · fa3b4d8
2 parents 7eb1e58 + 8b44715
commit fa3b4d8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -68,11 +68,12 @@
   "dependencies": {
     "babel-runtime": "^6.11.6",
     "deep-equal": "^1.0.1",
+    "events": "^1.1.1",
+    "insert-css": "^1.0.0",
+    "marked": "^0.3.6",
     "moment": "^2.15.1",
     "react-render-html": "^0.1.6",
-    "react-textarea-autosize": "^4.0.5",
-    "insert-css": "^1.0.0",
-    "marked": "^0.3.6"
+    "react-textarea-autosize": "^4.0.5"
   },
   "engines": {
     "npm": "^3.0.0"

diff --git a/src/manager/containers/CommentsPanel/dataStore.js b/src/manager/containers/CommentsPanel/dataStore.js
@@ -1,6 +1,7 @@
 /* eslint no-param-reassign:0 */
 
 import deepEquals from 'deep-equal';
+import { EventEmitter } from 'events';
 
 export default class DataStore {
   constructor(db) {
@@ -10,6 +11,8 @@ export default class DataStore {
     this.cache = {};
     this.users = {};
     this.user = null;
+
+    this.eventStore = new EventEmitter();
   }
 
   _addToCache(currentStory, comments) {
@@ -73,9 +76,14 @@ export default class DataStore {
 
     // load comments for the first time.
     // TODO: send a null and handle the loading part in the UI side.
+    this.eventStore.emit('loading', true);
     this._fireComments([]);
     this._loadUsers()
-      .then(() => this._loadComments());
+      .then(() => this._loadComments())
+      .then(() => {
+        this.eventStore.emit('loading', false);
+        return Promise.resolve(null);
+      });
   }
 
   setCurrentUser(user) {
@@ -211,4 +219,11 @@ export default class DataStore {
       .then(() => this._deleteCommentOnDatabase(commentId))
       .then(() => this._loadComments());
   }
+
+  onLoading(cb) {
+    this.eventStore.on('loading', cb);
+    return () => {
+      this.eventStore.removeListener('loading', cb);
+    };
+  }
 }
diff --git a/src/manager/containers/CommentsPanel/index.js b/src/manager/containers/CommentsPanel/index.js
@@ -30,12 +30,17 @@ export default class Container extends Component {
       this.store.setCurrentStory(kind, story);
     });
 
+    this.stopListingStoreLoading = this.store.onLoading((loading) => {
+      this.setState({ loading });
+    });
+
     this.init();
   }
 
   componentWillUnmount() {
     this.stopListeningToComments();
     this.stopListeningOnStory();
+    this.stopListingStoreLoading();
   }
 
   _getAppInfo(persister) {