VueJs Progress Bar to track VueX mutation progress

Question

I'm having an issue creating a Progress bar that tracks the real time progress of a VueX mutation.

I have a button component that runs a mutation when the user clicks the button. This mutation goes through an array and performs a function on each item in the array. While performing this function it updates a 'progress' status in the store. I have a progress bar component that reads this 'progress' status from the store as a computed property.

I was hoping that as the progress status updates so would the progress bar but it seems I am having an issue with the DOM Rendering the change as quickly as it is being updated. My mutation runs and the progress bar goes from 0 to 100 with no update in-between.

I guess I'm having an issue conceptualizing why my DOM isn't redrawing as quickly as I am updating the 'progress' status and if there is any way of accomplishing this

Most likely because your mutation is synchronous, so even though you're updating the progress status, the UI isn't able to update until your mutation is complete. You'll need to "chunk" your updates to allow the UI to update, this is usually done with a setTimeout of 0, after X amount of iterations. Also, could it be because the update happens too fast to see visually? — Eric Guan, Dec 12 '17 at 01:16
This is mostly correct for what I've found. I've used a setTimeout to not 'freeze' the DOM when processing my array elements. I'll add an answer below — Nathaniel Deshpande, Dec 12 '17 at 01:59

score 0 · Answer 1 · answered Dec 12 '17 at 02:02

I've found that the 'For' loop I use to process my array 'freezes' the dom and stops it from re-rendering. To fix this I've used a 'setTimeout' call. This seems like a hack but will hopefully help someone else who comes up against this issue. More answers appreciated. thanks to @Eric Guan for putting me down this path. I found the answer on another post here -> How to stop intense Javascript loop from freezing the browser

var self = this;
        var animals = ['dog', 'cat','lion','tiger','bear'];
        var processing = function() {               
            var animal = animals.shift();
            console.log(animal);
            if (animals.length > 0) {
                console.log(animals.length);
                var timer = setTimeout(processing, 1000);
                self.$store.commit('updateStatus', {progress : animals.length*20, msg: 'Progress Bar Test', status: 'processing', display: true});
            } else {
                console.log('clearing timeout');
                self.$store.commit('updateStatus', {progress : 100, msg: 'Progress Bar Test', status: 'processing', display: false});
                clearTimeout(timer);
            }
        }
        processing();

VueJs Progress Bar to track VueX mutation progress

1 Answers1