Ask A Question


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:

Join the discussion
Create an account Log in

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

Join 79,047+ 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.

    © 2023 GoRails, LLC. All rights reserved.