Implement a loading bar on the entire page in Vue.js while a request is being made

Question

Implement a loading bar on the entire page in Vue.js while a request is being made

There is an "edit" button on my page which allows me to edit certain elements and either save or close without saving.

I would like to implement a loading bar that displays when the user clicks the "save" button, indicating that the data is being processed before showing the results.

Current functionality:

After clicking the "edit" button, editable data appears with options to "save" or "close" (which dismisses changes). Clicking "save" reloads the page with updated data and displays an "updated" message, or shows an error message if the update fails.

Desired functionality:

Upon clicking the "save" button after making edits, I want the page to show a loading bar for a few seconds (e.g. 5 seconds). If the request completes within that time, the loading bar disappears; otherwise, it continues until completion. The page then displays the updated data and the "updated" notification.

Below are snippets related to this feature:

Button setup:

Insert code snippet here

Edit function:

Insert code snippet here

For the progress bar, I am utilizing Vuetify's circular progress component.

   <v-progress-circular
    v-show="loading"
    indeterminate
    color="primary">
   </v-progress-circular>

Struggling to determine where in the code to place this element for it to display correctly throughout the entire page. Placing it before or inside the buttons has not yielded the desired result.

javascript vue.js vuetify.js

Answer 1

Answer №1

If you're looking for a solution, one approach could be to implement an overlay that is positioned at the bottom of your root element.

Here's a basic example to give you an idea:

         <v-col cols="3">
          <v-btn
            v-if="editGroup"
            light
            class="mx-2"
            @click="editGroup = false"
          >
            <v-icon left>mdi-close</v-icon>
            Close
          </v-btn>
          <v-btn
            v-if="editGroup" 
            light 
            class="mx-2" 
            @click="clickSave"
            >
            <v-icon left>mdi-content-save</v-icon>
            Save
          </v-btn>
          <v-btn
            v-if="
              canShowButton(['administrator', 'configurator']) &&
              !editGroup
            "
            light
            class="mx-2"
            @click="editGroup = true"
          >
            <v-icon left>mdi-pencil</v-icon>
            Edit
          </v-btn>
          <--The overlay will only display when loading state is true-->
          <v-overlay v-model="loading">
            <v-progress-circular
            indeterminate
            color="primary">
            </v-progress-circular> 
          </v-overlay>
        </v-col>

The overlay will be visible across the entire screen as long as the loading state remains true.

Check out the Vuetify documentation on overlays for more information.

Edit:

In addition, make sure to initialize the loading state in the data section of your page upon initial load.

<script>
  export default {
    data: () => ({
      loading: false,
    }),
    },
  }
</script>

Answer 2

If you're looking for a solution, one approach could be to implement an overlay that is positioned at the bottom of your root element.

Here's a basic example to give you an idea:

         <v-col cols="3">
          <v-btn
            v-if="editGroup"
            light
            class="mx-2"
            @click="editGroup = false"
          >
            <v-icon left>mdi-close</v-icon>
            Close
          </v-btn>
          <v-btn
            v-if="editGroup" 
            light 
            class="mx-2" 
            @click="clickSave"
            >
            <v-icon left>mdi-content-save</v-icon>
            Save
          </v-btn>
          <v-btn
            v-if="
              canShowButton(['administrator', 'configurator']) &&
              !editGroup
            "
            light
            class="mx-2"
            @click="editGroup = true"
          >
            <v-icon left>mdi-pencil</v-icon>
            Edit
          </v-btn>
          <--The overlay will only display when loading state is true-->
          <v-overlay v-model="loading">
            <v-progress-circular
            indeterminate
            color="primary">
            </v-progress-circular> 
          </v-overlay>
        </v-col>

The overlay will be visible across the entire screen as long as the loading state remains true.

Check out the Vuetify documentation on overlays for more information.

Edit:

In addition, make sure to initialize the loading state in the data section of your page upon initial load.

<script>
  export default {
    data: () => ({
      loading: false,
    }),
    },
  }
</script>

Answer 3

Answer №2

State management with tools like pinia is essential for efficient data handling. By setting up a pinia store in the following manner:

import { defineStore } from "pinia"

export enum PageState {
  LOADING,
  LOADED,
  ERROR
}

export const usePageStore = defineStore({
  state: () => ({
    pageState: PageState.LOADED
  }),
  getters: {},
  actions: {
    saveData(endpointPrefix, groupId, newData) {
      try {
        // Perform URL building and data processing here
      } catch (e) {
        throw new Error(e)
      }
    },
  },
})

Instead of handling all data operations within your Vue script, you can simply do this:

pageStore = usePageStore()

async clickSave() {
  try {
    pageStore.pageState = PageState.LOADING
    const response = await pageStore.getData(this.endpointPrefix, this.groupId, dat)
    this.$nuxt.$emit('show-notification', {
          text: 'updated',
          color: 'green',
        })
    this.loadData(this.groupid)
    pageStore.pageState = PageState.LOADED
  } catch (e) {
    pageStore.pageState = PageState.ERROR
     this.$nuxt.$emit('show-notification', {
        text:
          'could not be updated !' +
          error.response.data,
        color: 'red',
      })
  }  
}

Your main page view can then access the same store, monitor that variable, and adjust accordingly to display the necessary information.

Answer 4

State management with tools like pinia is essential for efficient data handling. By setting up a pinia store in the following manner:

import { defineStore } from "pinia"

export enum PageState {
  LOADING,
  LOADED,
  ERROR
}

export const usePageStore = defineStore({
  state: () => ({
    pageState: PageState.LOADED
  }),
  getters: {},
  actions: {
    saveData(endpointPrefix, groupId, newData) {
      try {
        // Perform URL building and data processing here
      } catch (e) {
        throw new Error(e)
      }
    },
  },
})

Instead of handling all data operations within your Vue script, you can simply do this:

pageStore = usePageStore()

async clickSave() {
  try {
    pageStore.pageState = PageState.LOADING
    const response = await pageStore.getData(this.endpointPrefix, this.groupId, dat)
    this.$nuxt.$emit('show-notification', {
          text: 'updated',
          color: 'green',
        })
    this.loadData(this.groupid)
    pageStore.pageState = PageState.LOADED
  } catch (e) {
    pageStore.pageState = PageState.ERROR
     this.$nuxt.$emit('show-notification', {
        text:
          'could not be updated !' +
          error.response.data,
        color: 'red',
      })
  }  
}

Your main page view can then access the same store, monitor that variable, and adjust accordingly to display the necessary information.

Implement a loading bar on the entire page in Vue.js while a request is being made

Answer №1

Answer №2

Similar questions

AngularJS OAuth authentication Pop-up: Waiting for JSON response

The enigmatic loop traversal

react-i18next - The function call does not match any overload when the specified type is `string`

Utilizing Javascript to Connect with Java Web API

Utilize the data stored in chrome.storage within the Vue.js data

Four unique chip/tag colors, personalized to suit your style

How can I add content to the body of a modal in Bootstrap 3?

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

Attempting to modify the state within a nested object located in an array by using json data

Bring in numerous documents utilizing a glob pattern

Laravel: The current configuration does not support the experimental syntax 'classProperties' at this time

Prevent Repeated Data Input in an Array using JavaScript

Single-select components in React Native

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Utilizing turbolinks enables the page to be reloaded upon form submission

Sharing data between two Angular 2 component TypeScript files

Ways to retrieve arrow information in JavaScript?

Stop the slider when a video pops up

The Vue and Typescript webpage is not appearing in the GAS sidemenu template

What is the proper method for initiating an ajax request from an EmberJs component?