make xhr.cache optionally synchronous

- add `sync` flag xhr.cache
- change ng:include to use the sync flag
- change ng:view to use the sync flag

The end result is that there are fewer repaints in the browser,
which means less "blinking" that user sees.

2 files changed, 13 insertions, 6 deletions

diff --git a/src/service/xhr.cache.js b/src/service/xhr.cache.js
index 284321d7..c6066a5c 100644
--- a/src/service/xhr.cache.js
+++ b/src/service/xhr.cache.js
@@ -20,10 +20,11 @@
  * @param {boolean=} [verifyCache=false] If `true` then a result is immediately returned from cache
  *   (if present) while a request is sent to the server for a fresh response that will update the
  *   cached entry. The `callback` function will be called when the response is received.
+ * @param {boolean=} [sync=false] in case of cache hit execute `callback` synchronously.
  */
 angularServiceInject('$xhr.cache', function($xhr, $defer, $log){
   var inflight = {}, self = this;
-  function cache(method, url, post, callback, verifyCache){
+  function cache(method, url, post, callback, verifyCache, sync){
     if (isFunction(post)) {
       callback = post;
       post = null;
@@ -31,7 +32,13 @@ angularServiceInject('$xhr.cache', function($xhr, $defer, $log){
     if (method == 'GET') {
       var data, dataCached;
       if (dataCached = cache.data[url]) {
-        $defer(function() { callback(200, copy(dataCached.value)); });
+
+        if (sync) {
+          callback(200, copy(dataCached.value));
+        } else {
+          $defer(function() { callback(200, copy(dataCached.value)); });
+        }
+
         if (!verifyCache)
           return;
       }
diff --git a/src/widgets.js b/src/widgets.js
index ac8a88e0..87ceb909 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -673,12 +673,12 @@ angularWidget('ng:include', function(element){
             useScope = this.$eval(scopeExp);
 
         if (src) {
-          xhr('GET', src, function(code, response){
+          xhr('GET', src, null, function(code, response){
             element.html(response);
             childScope = useScope || createScope(scope);
             compiler.compile(element)(childScope);
             scope.$eval(onloadExp);
-          });
+          }, false, true);
         } else {
           childScope = null;
           element.html('');
@@ -1066,10 +1066,10 @@ angularWidget('ng:view', function(element) {
         }
 
         if (src) {
-          $xhr('GET', src, function(code, response){
+          $xhr('GET', src, null, function(code, response){
             element.html(response);
             compiler.compile(element)(childScope);
-          });
+          }, false, true);
         } else {
           element.html('');
         }