All threads / How can I stop/minimise VueJS components from being invisible on page load for a split second before appearing?

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How can I stop/minimise VueJS components from being invisible on page load for a split second before appearing?

Adam Wenham asked in Javascript
I'm using standard Rails views (rather than an API) with quite a lot of Vue components - but on page load, all of my those components are not rendered for a split second. They then all blink into existence all at once, which obviously isn't a great UX. How can I combat this effect?

Old post, but check out cloaking. Basically, you display something like a spinner or "loading..." graphic until the page data is available and then display the Vue components. Here's another post on the method: https://medium.com/vuejs-tips/v-cloak-45a05da28dc4

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,909+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.