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?
Reply

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

Reply
Join the discussion

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.