Display a spinner (preloader/loading indicator) each time the page transitions and remove it once all assets have finished loading in Vue Gridsome

Question

Display a spinner (preloader/loading indicator) each time the page transitions and remove it once all assets have finished loading in Vue Gridsome

I've set up a preloader using Gridsome (Vue static site generator with Vue Router). In my index.html, I added a simple div that covers the entire page. Then, to hide the preloader once everything has loaded, I included this JS code in index.html:

window.onload = function() {
  document.getElementById('preloader').style.display = 'none';
};

While this solution works for the initial load, I am facing issues when it comes to showing and hiding the preloader on page changes.

To show the preloader again after a page change, I attempted adding this logic to the beforeDestroy() hook of my Layout component:

beforeDestroy() {
  this.preloader.style.display = 'block';
}

This successfully displays the preloader upon route changes. However, if I try to include hiding logic in the mounted() method like so:

mounted() {
  this.preloader.style.display = 'none';
}

The preloader never appears in the first place. I've searched for resources on loading indicators specific to SPAs, but have only found examples related to async calls using axios or fetch. While I have experience creating preloaders in static HTML files, navigating this within SPAs is proving challenging. Can someone provide guidance or suggest keywords for further research? Any help would be appreciated.

vue.js vue-router gridsome

Answer 1

Answer №1

If you are facing this scenario, Vuex can be a helpful solution.

Start by defining your state in src/main.js

import DefaultLayout from "~/layouts/Default.vue";
import Vuex from "vuex";

export default function(Vue, { appOptions }) {
  Vue.component("Layout", DefaultLayout);
  Vue.use(Vuex);

  appOptions.store = new Vuex.Store({
    state: {
      loading: false,
    },
    mutations: {
      on(state) {
        state.loading = true;
      },
      off(state) {
        state.loading = false;
      },
    },
  });
}

Next, integrate a spinner into ./src/layouts/Default.vue

<template>
  <div class="layout">
    // Implement your spinner here or use another method
    <div v-if="$store.state.loading">loading</div>
    <slot />
  </div>
</template>

Lastly, include code to commit pages, templates, or components as shown below

<script>
export default {
  created() {
    // Initially commit "on"
    this.$store.commit("on");

    // Commit "off" at the end, after data fetching or any other actions.
    this.$store.commit("off");
  },
};
</script>

Answer 2

If you are facing this scenario, Vuex can be a helpful solution.

Start by defining your state in src/main.js

import DefaultLayout from "~/layouts/Default.vue";
import Vuex from "vuex";

export default function(Vue, { appOptions }) {
  Vue.component("Layout", DefaultLayout);
  Vue.use(Vuex);

  appOptions.store = new Vuex.Store({
    state: {
      loading: false,
    },
    mutations: {
      on(state) {
        state.loading = true;
      },
      off(state) {
        state.loading = false;
      },
    },
  });
}

Next, integrate a spinner into ./src/layouts/Default.vue

<template>
  <div class="layout">
    // Implement your spinner here or use another method
    <div v-if="$store.state.loading">loading</div>
    <slot />
  </div>
</template>

Lastly, include code to commit pages, templates, or components as shown below

<script>
export default {
  created() {
    // Initially commit "on"
    this.$store.commit("on");

    // Commit "off" at the end, after data fetching or any other actions.
    this.$store.commit("off");
  },
};
</script>

Display a spinner (preloader/loading indicator) each time the page transitions and remove it once all assets have finished loading in Vue Gridsome

Answer №1

Similar questions

Error encountered in Vue code, lacks default export on Editor Terminal

How can I retrieve and dismiss vee-validate errors from within a Vue component without direct access to the Vue instance?

What is the best way to reduce the width of the preformatted tag?

Issue with Vue component's computed property not responding as expected

Error in Quasar application: essential modules were not installed properly via npm

What are the distinct roles of the server and client in a Nuxt SSR application?

Inert child component in Vue

Concealing Vue object properties

Axios consistently produces results in the form of strings but always seem to omit the final

Exploring VueJS: Extracting nested object values from the Vuex store

The method options.domAPI is not a valid function in this context

Steps for resetting the Vue 3 scaffolding

Changing the URL within a Vue.js component without navigating away from the component

Error: Unable to access the 'push' property of an undefined element while utilizing Vue router along with Vue 3

Adding data to an array using V-Bind in VueJS

Tips to modify the parent CSS in a scoped style?

Creating Vue methods functions in separate JavaScript files

Prevent unnecessary clicks with Vue.js

Alter the dimensions and material displayed on Vue

Is it possible to use Vuelidate for password validation in Vue.js?