websocket + vuejs: screen flickering, visible mustache code

Question

I built a web-app using websockets, and vuejs.

In the DOM I want to loop over the data handled by vuejs. The data however is set later in the timeline, after a websocket connection has been established and the data has been received.

Up to that point (about 0.5 seconds), you can see the mustache code for vuejs on the site itself, then see it flicker and adding the real data.

I create the ViewModel, when receiving data from the websocket connection, like this:

onMessage: function (e) {
    new Vue({
        el: '#messages',
        data: {
            messages: e.data
        }
    });
}

What I already tried was initializing the ViewModels on page load, and set the data later:

var vms = {
    messages: new Vue({
        el: '#messages',
        data: {
            messages: {
            }
        }
    })
};

In the onMessage event of the websocket:

var vm = vms.messages;
vm.$data = { messages: body };

The problem is though, that there is still a delay, until the the vm is intialized. The sequence is like this:

page load -> visible mustache code -> mustache code is hidden, because data is set to an empty object -> real data is shown after it's received by the websocket

Any ideas / best practices on that matter?

Answer 1

I have the same problem until I read the api doc. Here is the link for v-cloak directives!

HTML:

<div id="demo" v-cloak><p>{{ test }}</p></div>

CSS:

[v-cloak] {display: none}

Answer 2

Based on dandavis' comment, I added a "hidden" class (display: none) to the DOM, and v-class="hidden: !done", to toggle the visibility of the DOM. done is a key-value pair in the data of the ViewModel.

HTML:

<div class="message hidden" v-repeat="messages" v-class="hidden: !done">...</div>

Javascript:

onMessage: function (e) {
    new Vue({
        el: '#messages',
        data: {
            messages: e.data,
            done: true
        }
    });
}