CODEWITHSUNDEEP
javascriptvue.jsvuex
Dan Knights
Dan Knights

Reputation: 8368

Handle data load - Vue

I'm loading item data from Vuex into a component. When I refresh the page it needs a second or two to load the data which causes the page to break briefly:

example of page breaking on refresh

Is there a way I can handle this more gracefully? Even just a white screen would look better.

Upvotes: 1

Views: 1001

Answers (3)

Ilijanovic
Ilijanovic

Reputation: 14904

You can do it this way for exapmle:

You first create an component called for example loader

//loader.vue

<template>
   <div class="loader">
      <p>Loading...</p>
   </div>
</template>
<style scoped>
.loader {
   width: 100vw;
   height: 100vh;
   background: white;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1000000;
}
</style>

Now you need to import your loader on that page where you need it. Then you add an v-if on it. You will need to add a new propertie to your state in your Vuex store.The loading propertie is on true initially. After you loaded everything you just set the loading to false and the component dissapear.

<template>
   <div>
      <loader v-if="$store.state.loading"></loader>
   </div>
</template>
import loader from "path/to/loader";
export default {
   components: {
      loader: loader
   }
}

Upvotes: 1

Dcoder14
Dcoder14

Reputation: 1939

Simply you can add a loader for that. Now a days many sites are showing beautiful loading icons or logos or messages when data is loading.For that check if data is loading then show loaders else show data in that page.

Let's take a small example for what I mean.

Vue.component('loading-screen', {
  template: '<div id="loading">Loading...</div>'
})

new Vue({
  el: '#app',
  data: {
    isLoading: true
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
})
body
  margin 0

#loading
  background-color #63ab97
  color white
  font-size 32px
  padding-top 10vh
  height 100vh
  text-align center
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <loading-screen v-if="isLoading"></loading-screen>
  <h1 v-else>Hello world!</h1>
</div>

Upvotes: 1

nitrocode
nitrocode

Reputation: 99

You can add a preloader on that page which loads for some seconds before displaying the actual page

Upvotes: 1

Related Questions