Spark forms show errors for a split second?

If I navigate to any of the Spark forms (register page, billing page, etc), it will show a bunch of Vuejs syntax and errors on the screen just for a split second, before loading the proper vue. It's so fast I couldn't even tell what it was until I took a screen cast and played it frame by frame to get these screenshots from the register page as an example:

clicking navigating to register page shows this for a split second - https://dl.dropboxusercontent.com/u/3841477/register_page_before.PNG

then it shows the proper view - https://dl.dropboxusercontent.com/u/3841477/register_page_after.PNG

Does anyone else have this same problem? Or did I just inadvertently make a change that caused this?

Francismori7

9 years ago

Best Answer

Level 52

Use v-cloak on the main div.

Also add to your css:

[v-cloak] {
    display: none;
}

This is known as FOUC to vuejs. v-cloak will be removed by the compiler once it gets processed so you will only have the compiled content visible once it is available.

1 like

wesleya

9 years ago

Level 6

@Francismori7 worked great thanks for the quick reply! http://vuejs.org/api/#v-cloak for more details if anyone else runs into the same thing.

1 like

Francismori7

9 years ago

Level 52

@wesleya no problem!

Please or to participate in this conversation.