Loader indication

lib/actions/DataActionGenerator.js

@@ -22,6 +22,7 @@ var DataActionGenerator = function(resourceName) {
     'resetView',
     'reload',
     'populate',
+    'onPopulateSuccess',
     'destroyAll',
     'setObject',
     'setCollection'

lib/components/FilteredDatasource.react.js

@@ -97,10 +97,11 @@ var FilteredDatasource = React.createClass({
     var {dataSource} = state;
     var {onData} = this.props;
     var data = dataSource.getCollection(props.tag);
+    var {loading, firstLoadComplete} = _.clone(dataSource.getLoadingStatus());
 
     onData && onData(data, dataSource.listenables);
     // this clone bug was absolutely insane. let's put this on our dev guide
-    this.setState({ data: _.clone(data) });
+    this.setState({ data: _.clone(data), loading, firstLoadComplete });
   },
 
   _repopulate(props, state) {
@@ -170,7 +171,9 @@ var FilteredDatasource = React.createClass({
 
     if (this.state.dataSource && (viewChanged || idChanged) ) {
       this.state.dataSource.listenables.resetView(nextProps.tag, false);
-      this._registerView(nextProps, this.state);
+      this.setState({loading: true}, () =>{
+        this._registerView(nextProps, this.state);
+      })
     }
 
     // Checks for parent changes

lib/mixins/DataMixin.js

@@ -1,5 +1,3 @@
-"use strict";
-
 var React = require('react');
 var _ = require('underscore');
 var DSManager = require('../services/DataStoreManager');
@@ -8,21 +6,30 @@ module.exports = {
 
   getInitialState() {
     return {
-      data:[],
-      dataSource: null
+      data: null,
+      dataSource: null,
+      firstLoadComplete: false,
+      loading: true,
     };
   },
 
   _buildDataProps() {
     var props = this._buildProps();
     // Nil hack basically.
+    var {dataSource, loading, firstLoadComplete} = this.state;
     var data = this.state.data || (this.props.objectId && {}) || [];
 
     var actions = {};
     if (this.state.dataSource) {
       actions = this.state.dataSource && this.state.dataSource.listenables;
     }
-    return _.extend(props, {data, actions});
+    return _.extend(props, {
+      data,
+      actions,
+      dataSource,
+      firstLoadComplete,
+      loading,
+    });
   },
 
   _prepareDatasource(config) {

lib/services/nsynchronizer.js

@@ -88,6 +88,9 @@ var Nsynchronizer = {
         if (objects.constructor === Array) {
           formatted = objects.map(this.deserializer.bind(null, object));
           this.store.listenables.setCollection(formatted);
+          setTimeout(() => {
+            this.store.listenables.onPopulateSuccess();
+          }, 1000);
         }
 
         else {

lib/stores/LokiStore.js

@@ -61,6 +61,8 @@ function generateStore(options) {
     name: name,
     collection: collection,
     dynamicViews: {},
+    firstLoadComplete: false,
+    loading: true,
 
     /**
      * Initializes store
@@ -80,6 +82,23 @@ function generateStore(options) {
       this.collection.flushChanges();
     },
 
+    populate() {
+      this.loading = true;
+      this.trigger('loading', this.loading);
+    },
+
+    onPopulateSuccess() {
+      this.loading = false;
+      this.firstLoadComplete = true;
+      this.trigger('loading', this.loading);
+    },
+
+    getLoadingStatus() {
+      return {
+        loading: this.loading,
+        firstLoadComplete: this.firstLoadComplete,
+      };
+    },
     /**
      * Adds an object to the store
      * @param {object} object Object to add
@@ -144,7 +163,11 @@ function generateStore(options) {
      * @return {event} Triggers event
      */
     destroy(id, trigger=true) {
-      this.collection.remove(this.get(id));
+      var objectId = id;
+      if (typeof id === 'object') {
+        objectId = id[idAttr];
+      }
+      this.collection.remove(this.get(objectId));
       this.trigger("destroy", id, trigger);
     },
 
@@ -215,7 +238,7 @@ function generateStore(options) {
     /**
      * Queries store
      * @param  {object} query mongo-style query
-     * @return {array} Array of reuslts
+     * @return {array} Array of results
      */
     find(query) {
       return this.collection.find(query);
@@ -227,10 +250,10 @@ function generateStore(options) {
      * @return {array} Collection of objects
      */
     getCollection(tag) {
-      var collection = [];
+      var collection = null;
       if (tag) {
         var view = this.collection.getDynamicView(tag);
-        collection = view ? view.data() : [];
+        collection = view ? view.data() : null;
       } else {
         collection = this.find();
       }