rudimentary loading indicator for sync

src/mm-sync/index.html

@@ -60,7 +60,10 @@
     <template>
         <mm-checkbox checked="{{allow}}"><label>Allow</label></mm-checkbox>
         <mm-input value="{{autoTest}}"></mm-input><span>{{autotest}}</span>
-        <mm-sync endpoint="http://localhost:8000/ajax" data="{{zippy}}">
+        <template is="dom-if" if="{{isLoading}}">
+            <span>Is Loading!</span>
+        </template>
+        <mm-sync endpoint="http://localhost:8000/ajax" data="{{zippy}}" is-loading="{{isLoading}}">
             <GET>
                 <queryParam name="q" value="ui.*" conditional if$="{{allow}}"></queryParam>
                 <queryParam name="user">userInnerVal</queryParam>

src/shared/js/sync.html

@@ -84,6 +84,7 @@
 
 	scope.Sync = function(endpoint, options, data, domHook, saveResponse, plugins) {
 		this._eventPrefix = _eventPrefix;
+		this.isLoading = false;
 		this.endpoint = this.endpoint || endpoint || "/";
 		this.options = DataUtils.copy({
 			contentType:"application/x-www-form-urlencoded",
@@ -146,6 +147,8 @@
 				promise = this._ajax.exec(null, options);
 			}
 
+			this.isLoading = true;
+
 			promise.then(this._handleResult.bind(this), this._handleError.bind(this));
 
 			return promise;
@@ -155,6 +158,7 @@
 
 			this.fire("ready", result, {prefix:true});
 
+			this.isLoading = false;
 			result = this._plugin.processResponse(result);
 
 			if (this.saveResponse) {
@@ -169,6 +173,7 @@
 		},
 
 		_handleError: function(error) {
+			this.isLoading = false;
 			this.fire("error", error, {prefix:true});
 		},
 
@@ -223,6 +228,11 @@
 			saveResponse:{
 				type:Boolean,
 				value:true
+			},
+			isLoading:{
+				type:Boolean,
+				value:false,
+				notify:true
 			}
 		},
 		created: function() {