Looking to display an element right away, like a loading spinner, in Vue? If nextTick isn't doing the trick, here's what you can try

Question

Looking to display an element right away, like a loading spinner, in Vue? If nextTick isn't doing the trick, here's what you can try

Imagine having a Vue component stored in a .vue file with a data member called isLoading: false. The template includes:

<div v-show="isLoading" id="hey" ref="hey">Loading...</div>
<button @click="loadIt()">Load it</button>

Along with a method:

loadIt() {
  this.isLoading = true
  this.$nextTick(() => {
    console.log(this.$refs.hey)
    // ...other work here that causes other DOM changes
    this.isLoading = false
  })
}

(The term "Loading" refers to loading from the local memory, not an external request. The goal is to display a simple "loading" message instantly while the potential 0.2-0.5 second DOM modifications are underway.)

The expectation was that the $nextTick function would update both the virtual and actual DOM. Despite the console log indicating that the item was displayed (removing the display: none style), the "Loading..." indicator never appears in Chrome or Firefox. The brief pause occurs, followed by the subsequent DOM changes without displaying the Loading indicator.

If opting for setTimeout instead of $nextTick, the loading indicator becomes visible, but only when the additional tasks run slowly enough. When there is a delay of several tenths of a second, the loading indicator remains hidden. The desired outcome is for it to show promptly upon clicking for a more responsive user interface.

Check out the example on JSFiddle

javascript vue.js

Answer 1

Answer №1

As per findings on this Github 'issue', it seems that there is some unusual behavior with the Vue.nextTick function. The nextTick function apparently executes just before the DOM is due to be re-rendered. This can result in the loading div being hidden right after it briefly appears due to the timing of the nextTick. Although suggestions were provided on the Github issue, not all of them proved effective.

The workaround reported to make it function properly involves using setTimeout along with a specified delay. While a 1 millisecond delay may not consistently trigger a DOM update, a delay of around 25 milliseconds is recommended for better results. Although not an ideal solution, this workaround was the most reliable option discovered. Hopefully, you may find the link to the Github discussion helpful for further insights.

JSFiddle showcasing examples

Answer 2

As per findings on this Github 'issue', it seems that there is some unusual behavior with the Vue.nextTick function. The nextTick function apparently executes just before the DOM is due to be re-rendered. This can result in the loading div being hidden right after it briefly appears due to the timing of the nextTick. Although suggestions were provided on the Github issue, not all of them proved effective.

The workaround reported to make it function properly involves using setTimeout along with a specified delay. While a 1 millisecond delay may not consistently trigger a DOM update, a delay of around 25 milliseconds is recommended for better results. Although not an ideal solution, this workaround was the most reliable option discovered. Hopefully, you may find the link to the Github discussion helpful for further insights.

JSFiddle showcasing examples

Answer 3

Answer №2

It seems like you might be overthinking things.

Here is a simplified version that should work smoothly:

new Vue({
  el: "#app",
  data: {
   isLoading: false,
   done: false
  },
  methods: {
    loadIt() {
      this.isLoading = true
      // Simulating a lengthy AJAX request...
      window.setTimeout(() => {
        this.done = true
        this.isLoading = false
      }, 3000)
    }
  }
})

Update: After further investigation, I found a workaround for your issue. It's not the most elegant solution but it seemed to resolve the problem related to the event loop.

new Vue({
  el: "#app",
  data: {
   isLoading: false,
   done: false
  },
  methods: {
    loadIt () {
      this.isLoading = true

      window.setTimeout(() => {
        for (var i = 1; i < 40000000; ++i) {
          this.done = !i
        }

        this.done = true
        this.isLoading = false
      }, 10)    
    }
  }
})

Note: This solution worked perfectly for me, although I did notice some quirks with saving and running on JSFiddle. Remember to save by pressing Command / Ctrl + S before clicking the Run button.

Answer 4

It seems like you might be overthinking things.

Here is a simplified version that should work smoothly:

new Vue({
  el: "#app",
  data: {
   isLoading: false,
   done: false
  },
  methods: {
    loadIt() {
      this.isLoading = true
      // Simulating a lengthy AJAX request...
      window.setTimeout(() => {
        this.done = true
        this.isLoading = false
      }, 3000)
    }
  }
})

Update: After further investigation, I found a workaround for your issue. It's not the most elegant solution but it seemed to resolve the problem related to the event loop.

new Vue({
  el: "#app",
  data: {
   isLoading: false,
   done: false
  },
  methods: {
    loadIt () {
      this.isLoading = true

      window.setTimeout(() => {
        for (var i = 1; i < 40000000; ++i) {
          this.done = !i
        }

        this.done = true
        this.isLoading = false
      }, 10)    
    }
  }
})

Note: This solution worked perfectly for me, although I did notice some quirks with saving and running on JSFiddle. Remember to save by pressing Command / Ctrl + S before clicking the Run button.

Answer 5

Answer №3

Issue stems from the behavior of browsers themselves. They tend to have a lazy approach to re-rendering in order to prevent layout thrashing. To overcome this, you can utilize a simple trick to prompt the browser to immediately re-render the screen:

loadIt() {
  this.isLoading = true
  this.$nextTick(() => {
    // At this point, the reference is available
    console.log(this.$refs.hey)
    
    // The problem arises here. The browser waits for further DOM changes
    // to batch them and compute all changes at once, causing your component
    // to not render when changing visibility back to invisible state.
    // To resolve this issue, force the browser to re-render by, for example,
    // requesting the new element width:
    let width = this.$refs.hey.width
    
    // The browser has no choice but to re-render the DOM and provide the new
    // element width. Your component is now rendered by the browser and you can
    // safely switch the visibility again:
    this.isLoading = false
  })
}

Full example:

<template>
  <div v-if="isLoading" ref="hey">
    Loading...
  </div>

  <button @click="loadIt">
    Load it
  </button>

  <div v-if="isDone">
    Done
  </div>
</template>

<script>
export default {
  name: 'MyComponent',

  data () {
    return {
      isLoading: false,
      isDone: false
    }
  },

  methods: {
    delay: ms => new Promise(res => {
      setTimeout(res, ms)
    }),

    async loadIt() {
      this.isLoading = true

      // wait for virtual DOM to render to real DOM
      await this.$nextTick()

      // force DOM re-render
      console.log(this.$refs.hey.width)

      // wait for some time, longer than monitor refresh rate
      await this.delay(40)

      this.isDone = true
      this.isLoading = false
    }
  }
</script>

Answer 6

Issue stems from the behavior of browsers themselves. They tend to have a lazy approach to re-rendering in order to prevent layout thrashing. To overcome this, you can utilize a simple trick to prompt the browser to immediately re-render the screen:

loadIt() {
  this.isLoading = true
  this.$nextTick(() => {
    // At this point, the reference is available
    console.log(this.$refs.hey)
    
    // The problem arises here. The browser waits for further DOM changes
    // to batch them and compute all changes at once, causing your component
    // to not render when changing visibility back to invisible state.
    // To resolve this issue, force the browser to re-render by, for example,
    // requesting the new element width:
    let width = this.$refs.hey.width
    
    // The browser has no choice but to re-render the DOM and provide the new
    // element width. Your component is now rendered by the browser and you can
    // safely switch the visibility again:
    this.isLoading = false
  })
}

Full example:

<template>
  <div v-if="isLoading" ref="hey">
    Loading...
  </div>

  <button @click="loadIt">
    Load it
  </button>

  <div v-if="isDone">
    Done
  </div>
</template>

<script>
export default {
  name: 'MyComponent',

  data () {
    return {
      isLoading: false,
      isDone: false
    }
  },

  methods: {
    delay: ms => new Promise(res => {
      setTimeout(res, ms)
    }),

    async loadIt() {
      this.isLoading = true

      // wait for virtual DOM to render to real DOM
      await this.$nextTick()

      // force DOM re-render
      console.log(this.$refs.hey.width)

      // wait for some time, longer than monitor refresh rate
      await this.delay(40)

      this.isDone = true
      this.isLoading = false
    }
  }
</script>

Answer 7

Answer №4

The reason for this issue is the usage of synchronous JavaScript operations.

for (var i = 1; i<10000000; ++i){
    this.done = !i
}

To display the loading indicator on the page, it's necessary to either utilize a web worker or switch the logic to an asynchronous style.

Check out this working example on fiddle: https://jsfiddle.net/508odkm9/1/

Answer 8

The reason for this issue is the usage of synchronous JavaScript operations.

for (var i = 1; i<10000000; ++i){
    this.done = !i
}

To display the loading indicator on the page, it's necessary to either utilize a web worker or switch the logic to an asynchronous style.

Check out this working example on fiddle: https://jsfiddle.net/508odkm9/1/

Looking to display an element right away, like a loading spinner, in Vue? If nextTick isn't doing the trick, here's what you can try

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring

Automatically Dismissing a Bootstrap Alert After a Set Number of Seconds

The words spill across the navigation bar

Modify a unique custom binding handler in such a way that it is designated using an Immediately Invoked Function Expression

C# implementation of the btoa function from JavaScript

A guide on extracting JSON data from a script tag using Cheerio

Exploring the Use of 7BitEncodedInt in JavaScript

The AJAX request to fetch XML data resulted in a failure to redirect as intended

The POST request is not functioning. An error has occurred: Unable to retrieve response data - no content is available for the preflight request

Switching between components in vue.js: A beginner's guide

Looking to confirm client-side text in NodeJS?

Error animation on client-side validation not resetting correctly

The issue of infinite rendering caused by useState and how to effectively resolve it

"Having trouble getting the onChange function to work with Material-UI's Select

The functionality of Environment Variables only applies during the build process and does not affect the execution of npm run serve

Unable to load models in face-api.js even though attempting to infer the models

Achieving the highest ranking for Kendo chart series item labels

Concealing a feature across all pages of the website

Tips for identifying and handling a 400 bad request error in an HTTP response within an Angular 2 application

Performing an API request and saving the response data into a