use animation best practices in dbmon

examples/dbmonster/vue/app.js

@@ -4,48 +4,48 @@ perfMonitor.startMemMonitor()
 perfMonitor.initProfiler("render")
 
 var vm = new Vue({
-  el: '#app',
-  data: {
-    databases: [],
-  },
-  methods: {
-    update: function () {
-      this.databases = ENV.generateData().toArray()
-      setTimeout(this.update.bind(this), ENV.timeout)
+	el: '#app',
+	data: {
+		databases: [],
+	},
+	methods: {
+		update: function () {
+			requestAnimationFrame(this.update.bind(this))
+			this.databases = ENV.generateData().toArray()
 
-      if (renderStage === 0) {
-        renderStage = 1
-        perfMonitor.startProfile('render')
-      }
-    },
-  },
-  updated: function () {
-    if (renderStage === 1) {
-      renderStage = 0
-      perfMonitor.endProfile('render')
-    }
-  },
-  template: '<div>' +
-      '<table class="table table-striped latest-data">' +
-        '<tbody>' +
-          '<tr v-for="db of databases">' +
-            '<td class="dbname">{{ db.dbname }}</td>' +
-            '<td class="query-count">' +
-              '<span v-bind:class="[ db.lastSample.countClassName ]">' +
-                '{{ db.lastSample.nbQueries}}' +
-              '</span>' +
-            '</td>' +
-            '<td v-for="q of db.lastSample.topFiveQueries" v-bind:class="[ q.elapsedClassName ]">' +
-              '{{ q.formatElapsed }}' +
-              '<div class="popover left">' +
-                '<div className="popover-content">{{ q.query }}</div>' +
-                '<div className="arrow"></div>' +
-              '</div>' +
-            '</td>' +
-          '</tr>' +
-        '</tbody>' +
-      '</table>' +
-    '</div>',
+			if (renderStage === 0) {
+				renderStage = 1
+				perfMonitor.startProfile('render')
+			}
+		},
+	},
+	updated: function () {
+		if (renderStage === 1) {
+			renderStage = 0
+			perfMonitor.endProfile('render')
+		}
+	},
+	template: '<div>' +
+			'<table class="table table-striped latest-data">' +
+				'<tbody>' +
+					'<tr v-for="db of databases">' +
+						'<td class="dbname">{{ db.dbname }}</td>' +
+						'<td class="query-count">' +
+							'<span v-bind:class="[ db.lastSample.countClassName ]">' +
+								'{{ db.lastSample.nbQueries}}' +
+							'</span>' +
+						'</td>' +
+						'<td v-for="q of db.lastSample.topFiveQueries" v-bind:class="[ q.elapsedClassName ]">' +
+							'{{ q.formatElapsed }}' +
+							'<div class="popover left">' +
+								'<div className="popover-content">{{ q.query }}</div>' +
+								'<div className="arrow"></div>' +
+							'</div>' +
+						'</td>' +
+					'</tr>' +
+				'</tbody>' +
+			'</table>' +
+		'</div>',
 })
 
 vm.update()