CODEWITHSUNDEEP
vue.jsvuetify.js
serge
serge

Reputation: 15219

Vuetify loader component until page fully loaded

Is there a way to display a Vuetify loader component until all the elements are loaded? If not it displays for a moment the {{ and }} and is not very aesthetic.

I have a big page and a lot of items, applying v-cloak on each item don't consider to be cool either, I prefer to display a loader.

Upvotes: 1

Views: 11740

Answers (1)

morphatic
morphatic

Reputation: 7945

The Vuetify overlay component is not a bad choice in this kind of instance. You can chose an opaque overlay with an indeterminate loader that you then hide when everything has loaded:

<template>
  <div>
    <div id="the-content">
      This is the stuff that gets hidden until it's loaded...
    </div>
    <v-overlay
      :opacity="1"
      :value="overlay"
    >
      <v-progress-circular indeterminate size="64">
        Loading...
      </v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
  export default {
    data: () => ({
      overlay: true,
    }),
    mounted() {
      // hide the overlay when everything has loaded
      // you could choose some other event, e.g. if you're loading
      // data asynchronously, you could wait until that process returns
      this.overlay = false
    }, 
  }
</script>

Note: in this example, you're not likely to see the loading overlay since the content on this page takes such a short time to actually load.

Upvotes: 4

Related Questions