From 3a95b5e8a9a030b318199838ac05a0692e5473a8 Mon Sep 17 00:00:00 2001 From: Udo Walter Date: Fri, 22 Feb 2019 02:44:24 +0000 Subject: [webapp] implement time slicing loop and use it to search in the datatable This improves UI responsiveness a lot while searching. --- webapp/src/main.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'webapp/src/main.js') diff --git a/webapp/src/main.js b/webapp/src/main.js index 4eb4636..a87aae8 100644 --- a/webapp/src/main.js +++ b/webapp/src/main.js @@ -88,10 +88,28 @@ Vue.prototype.$alert = function (data, emit = true) { if (emit) socket.emit('notifications newAlert', data) store.commit('notifications/newAlert', data) } + Vue.prototype.$snackbar = function (data) { store.commit('notifications/newSnackbar', data) } +// Loop that processes work in chunks to allow the UI to refresh inbetween and prevents freezing. +Vue.prototype.$loop = function (count, chunksize, callback, breakLoop = () => false, finished = () => {}) { + var i = 0; + (function chunk () { + var end = Math.min(i + chunksize, count) + for (; i < end; ++i) { + callback(i) + } + let bl = breakLoop() + if (i < count && !bl) { + setTimeout(chunk, 0) + } else if (!bl) { + finished() + } + })() +} + new Vue({ store, router, -- cgit v1.2.3-55-g7522