Vuetify v-progress-linear (indeterminate) not updating

Question

I've been working on this for hours, but can't find a solution:

For a long running task, I am using a simple vuetify v-dialog box including a v-progress-linear bar to give some visual feedback to the user. As the duration of the task is unknown, I am using the progress bar as indeterminate as such:

  <v-dialog
      v-model="dialog"
      persistent
      min-width="350"
      max-width="600"
      hide-overlay
    >
      <v-card>
        <v-card-title class="headline grey lighten-2">
          {{ title }}
        </v-card-title>
        <v-card-text>
          <p></p>
          <h3>{{ message }}</h3>
        </v-card-text>
        <v-spacer></v-spacer>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-progress-linear
            indeterminate
            color="blue"
            class="mb-0"
            width="100%"
          />
        </v-card-actions>
      </v-card>
      <v-card> </v-card>
    </v-dialog>

I open this dialog before the long running process, which itself is packed in a promise, and close (hide) it once the promise is resolve. Conceptually, this looks like:

show_dialog();

long_running_task()       // returns a promise
   .then(close_dialog())

The problem is, that the long running task (loading, parsing, and manipulating an Excel on the client side) takes not only "long" (about 10 seconds), but is also resource hungry. And since it's basically a library call for which I don't have the source code for, I have only one "atomic" call to deal with.

What happens now is the progress bar in the vuetify component just gets stuck and is not updated anymore until the long running process is completed, and the resources release. My previous belief was that a promise can run "separately" and even if a lot of resources are used it would allow for other tasks to run and not just hug everything.

I'm using the following environment:

• Intel Core i9-8959HK CPU @ 2.90 GHz
• 32 GB memory
• Firefox
• Latest JS, Vue, Vuetify stack

My question:

• Is my understanding of promises wrong?
• How can I ensure the progress bar is properly updated, even if the promise uses a lot of resources? Or is there something else going on that I'm missing?

Answer 1

Try this.

   show_dialog();
   long_running_task()
    .then(() => {
     close_dialog()
    })

if this doesn't I will show u another way