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

What steps should I take to optimize the performance of this code by implementing rate-limiting for its execution speed?

Is Node.js going to continue to provide support for its previous versions of node modules?

What steps do you take to establish a relay connection for pagination in an ORM framework?

Script on Tampermonkey executed prior to page loading

React error message: "Cannot update state on a component that is not mounted" unless using the useEffect hook

Using NodeJs to pass values to a callback within a condition statement and retrieve the returned value

Cleaning up HTML5 video content

Simple server using node.js and express to host an HTML file and associated resources

After refreshing the page, the Vue instance that was imported is not defined within the created or mounted hooks

Revamp your code by utilizing ES6 class to replace multiple if statements in Javascript

What could be causing an error in a scroll handler when using React's setState function?

Turn off Babel's strict mode when transpiling JavaScript files

What is the best way to fill a "multiselect" element with information from a JSON object?

Refreshing an order in Laravel and Vue using axios

What could be the reason for the absence of 'server' and 'client'?

The callback function for the `input` component in React Native must be a function and should not be undefined. Always remember to start component names with the proper syntax

Troubleshooting Angular 2 ng-if issues

Ways to ensure the text on my website scrolls into view as the user navig

Occasionally, data may fail to be fetched when using a Jquery GET

Fetching data during Nuxt 3 server initialization: A step-by-step guide