I aim to conceal the Spinner feature within the service layer of Vue JS

Question

I aim to conceal the Spinner feature within the service layer of Vue JS

I have a basic bootstrap Spinner.vue component

<template>
    <div class="modal" v-if="start">
          <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
          </div>
    </div>
</template>

<script>
export default {
    name: 'Spinner',
    props: {
        start: {
            type: Boolean,
            default: true,
        },
    },
}
</script>

Considering the scale of my application, it might not be efficient to import this component into every component or page where a spinner is needed for data fetching. I also would like to prefetch data and pass it directly to a page using Vue Router like shown below:

const routes = [
  {
    name: RouteNames.XYZ,
    path: '/xyz',
    beforeEnter: async (to) => {
      let data = await Service.getList();
      to.params.list= data.list;
    },
    component: xyzList,
  },
]

It would be advantageous if my service wrapper class had methods to showSpinner and hideSpinner that can be used in all data-fetching methods such as Service.getList(). Is there a way to achieve this? Can I somehow incorporate my Spinner component into this JavaScript service class?

If possible, I would prefer to implement this functionality without relying on an external spinner library."

javascript vue.js

Answer 1

Answer №1

If you want to streamline this process, consider integrating this component into the App.vue file. By doing so, it will be readily available when the application loads.

Do you happen to have request interceptors set up for your data fetching (possibly using Axios)?

Within these interceptors, you can manage the spinner's visibility. With a bit more insight into your code, I could offer additional assistance in guiding you further.

Below is a basic illustration. Notice that the store has been imported, allowing you to utilize it to initiate a mutation with commit and toggle the spinner display.

import axios from "axios";
import store from "../store";

const Axios = axios.create({
    baseURL: process.env.VUE_APP_BASE_API_URL,
});

const addToken = (config: any) => {
    const token = store.getters["Auth/getToken"];
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
};

Axios.interceptors.request.use(
    (config) => {
        // activate the spinner functionality here
        addToken(config);
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

Axios.interceptors.response.use(
    (response) => {
        // deactivate the spinner functionality here
        return response
    },
    (error) => Promise.reject(error)
);

export default Axios;

Your routing configuration should not impact the desired outcome of this implementation.

Answer 2

If you want to streamline this process, consider integrating this component into the App.vue file. By doing so, it will be readily available when the application loads.

Do you happen to have request interceptors set up for your data fetching (possibly using Axios)?

Within these interceptors, you can manage the spinner's visibility. With a bit more insight into your code, I could offer additional assistance in guiding you further.

Below is a basic illustration. Notice that the store has been imported, allowing you to utilize it to initiate a mutation with commit and toggle the spinner display.

import axios from "axios";
import store from "../store";

const Axios = axios.create({
    baseURL: process.env.VUE_APP_BASE_API_URL,
});

const addToken = (config: any) => {
    const token = store.getters["Auth/getToken"];
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
};

Axios.interceptors.request.use(
    (config) => {
        // activate the spinner functionality here
        addToken(config);
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

Axios.interceptors.response.use(
    (response) => {
        // deactivate the spinner functionality here
        return response
    },
    (error) => Promise.reject(error)
);

export default Axios;

Your routing configuration should not impact the desired outcome of this implementation.

I aim to conceal the Spinner feature within the service layer of Vue JS

Answer №1

Similar questions

python extract values from a JSON object

The functionality of Jquery appears to be malfunctioning on the Drupal platform, although it performs

There seems to be a disconnect between the React Redux store

An error occurred while attempting to reset your password on Parse.com (JS SDK) due to an

Exploring the documentation of node.js with doxygen

The jQuery AJAX function appears to be unresponsive and failing to execute

What could be causing the delay in this script's execution?

What strategies can be implemented to decrease the initial loading duration of a YouTube iframe video?

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

Error encountered at / - undefined local variable or method `parameters' for main:Object (Executing Stripe Charge with Stripe.js)

The variables $invalid and $valid in my AngularJS form have not been assigned any values

Having difficulty resolving all parameters for the component: (?, [object Object]) in the Jasmine component Unit Test

The jQuery menu is malfunctioning in Internet Explorer due to the Document Mode being set to Quirks

JQuery is facing difficulty in animating a div following the completion of a "forwards" css animation

What is the process for obtaining a client-side cookie using next.js?

Using Vue.js for redirecting with a post method

An error in TypeScript has occurred, stating that the type 'IterableIterator<any>' is neither an array type nor a string type

Is there a way to retrieve the client's IP address from the server side within a Next.js application?

Issues with AJAX junk appearing after the document element in Firefox are causing disruption

Learn how to efficiently send multiple image files to the server by utilizing Formidable and React JS