From 4c54a294f630d5c1eaf7a008479863cacf1c2836 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Tue, 9 Aug 2016 14:11:43 +0200
Subject: [PATCH] use requestAnimationFrame for loading icon if available

---
 index.js                         | 31 ++++++++++++++++++++--------
 source/UI/js/Core/LoadingIcon.js | 35 ++++++++++++++++++++++----------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/index.js b/index.js
index 68d883ce..9625bf32 100644
--- a/index.js
+++ b/index.js
@@ -353,23 +353,36 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
         rotate: function() {
             var css, deg = 0,
                 previousTime = +new Date(),
-                interval = setInterval(function() {
-                    var currentTime = +new Date(),
-                        delta = (currentTime - previousTime) / 1000,
-                        loadingIcon = document.getElementById('loadingIcon');
-                    if (loadingIcon) {
+                interval;
+            function step() {
+                var currentTime = +new Date(),
+                    delta = (currentTime - previousTime) / 1000,
+                    loadingIcon = document.getElementById('loadingIcon'),
+                    next = Math.round((deg + delta * 360) % 360 / 30) * 30;
+                if (loadingIcon) {
+                    if (deg != next) {
                         previousTime = currentTime;
-                        deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
+                        deg = next;
                         css = 'rotate(' + deg + 'deg)';
                         loadingIcon.style.MozTransform = css;
                         loadingIcon.style.MSTransform = css;
                         loadingIcon.style.OTransform = css;
                         loadingIcon.style.WebkitTransform = css;
                         loadingIcon.style.transform = css;
-                    } else {
-                        clearInterval(interval);
                     }
-                }, 83);
+                    if (window.requestAnimationFrame !== undefined) {
+                        window.requestAnimationFrame(step);
+                    }
+                } else if (window.requestAnimationFrame === undefined) {
+                    clearInterval(interval);
+
+                }
+            };
+            if (window.requestAnimationFrame !== undefined) {
+                window.requestAnimationFrame(step);
+            } else {
+                interval = setInterval(step, 83);
+            }
         },
         setTheme: function(theme) {
             app.user.theme = theme;
diff --git a/source/UI/js/Core/LoadingIcon.js b/source/UI/js/Core/LoadingIcon.js
index 0ab96f79..c3f39da4 100644
--- a/source/UI/js/Core/LoadingIcon.js
+++ b/source/UI/js/Core/LoadingIcon.js
@@ -29,20 +29,19 @@ Ox.LoadingIcon = function(options, self) {
         ? that.css({width: self.options.size, height: self.options.size})
         : that.addClass('Ox' + Ox.toTitleCase(self.options.size));
 
-    that.stopAnimation = that.stop;
-
     /*@
     start <f> Start loading animation
         ()  -> <f> Loading Icon Element
     @*/
     that.start = function(callback) {
         var css, deg = 0, previousTime = +new Date();
-        if (!self.loadingInterval) {
-            self.loadingInterval = setInterval(function() {
-                var currentTime = +new Date(),
-                    delta = (currentTime - previousTime) / 1000;
+        function step() {
+            var currentTime = +new Date(),
+                delta = (currentTime - previousTime) / 1000,
+                next = Math.round((deg + delta * 360) % 360 / 30) * 30;
+            if (deg != next) {
                 previousTime = currentTime;
-                deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
+                deg = next;
                 css = 'rotate(' + deg + 'deg)';
                 that.css({
                     MozTransform: css,
@@ -51,8 +50,18 @@ Ox.LoadingIcon = function(options, self) {
                     WebkitTransform: css,
                     transform: css
                 });
-            }, 83);
-            that.stopAnimation().animate({opacity: 1}, 250, function() {
+            }
+            if (!self.stopping && !Ox.isUndefined(window.requestAnimationFrame)) {
+                self.loadingInterval = window.requestAnimationFrame(step);
+            }
+        }
+        if (!self.loadingInterval) {
+            if (Ox.isUndefined(window.requestAnimationFrame)) {
+                self.loadingInterval = setInterval(step, 83);
+            } else {
+                self.loadingInterval = window.requestAnimationFrame(step);
+            }
+            that.animate({opacity: 1}, 250, function() {
                 callback && callback();
             });
         }
@@ -66,9 +75,13 @@ Ox.LoadingIcon = function(options, self) {
     that.stop = function(callback) {
         if (self.loadingInterval && !self.stopping) {
             self.stopping = true;
-            that.stopAnimation().animate({opacity: 0}, 250, function() {
+            that.animate({opacity: 0}, 250, function() {
                 var css = 'rotate(0deg)';
-                clearInterval(self.loadingInterval);
+                if (Ox.isUndefined(window.cancelAnimationFrame)) {
+                    clearInterval(self.loadingInterval);
+                } else {
+                    window.cancelAnimationFrame(self.loadingInterval);
+                }
                 self.loadingInterval = null;
                 self.stopping = false;
                 that.css({