0

I have a problem that seems simple but I can't find a solution.

I have a page with a select button and a chart. When I choose an option, updateGraph method is called. In this method, I change the data this.loading to display a spinner instead of the chart.

First problem: the spinner is not displayed. Second problem: the task being relatively long, the select button is also blocked (it is not closed).

I tried to use async/await but it doesn't change anything.

I don't know if that's possible or if I'm doing things the wrong way. Thank you in advance for your help and advice.

<v-select [...] @change="updateGraph"></v-select>

<v-row v-if="!processingDatas">
  [...] No problem 
<v-row v-else justify="center" class="pa-5">
  <v-progress-circular
        :size="70"
        :width="7"
        color="accent"
        indeterminate
      ></v-progress-circular>
    </v-row>

data() {
      return {
        processingDatas: false,
        ...
             }

updateGraph() {
        this.processingDatas = true
        this.formatFlux().then(() => {
          this.processingDatas = false
        })
      },

async formatFlux() {
        [...]
        // long task
        // it takes few seconds
        return await Promise.resolve()
      },
kmlcglr
  • 31
  • 1
  • 6
  • @blex thank you for your answer. I had come up with this solution (https://stackoverflow.com/a/38397613/13108228) that looked like option 1. I wondered if it was a good solution or if there were no alternatives. – kmlcglr Jun 24 '20 at 20:33
  • You're right in thinking that `setTimeout` looks a little "hacky". That's true, but there is in fact no other way, other than web workers, which are not that complicated once you know how to use them. JS execution blocks the UI. So you either need to give it some breaks (`setTimeout`) or make it run somewhere else (web worker) – blex Jun 24 '20 at 20:42
  • 1
    @blex ok, thanks for your explanations, I come from the C++, java languages where there are no such problems. I will try the method with a web worker – kmlcglr Jun 24 '20 at 20:53

0 Answers0