javascript - Display progress bar vue flask

Question

How can I display a progress bar in VUE while a process is running in Flask. I believe it must be something similar to this code, but I can't get the function running.

HelloWorld.vue

<template>
    <div class="text-center">
      <v-progress-circular v-show="isLoading" indeterminate></v-progress-circular>
      <h1 v-if="predictedClass"> {{ myResult }} </h1>
    </div>
</template>
<script>
  import axios from 'axios'
export default {
    name: 'HelloWorld',
    data: () => ({
      isLoading: false,
      myResult : ''
    }),
    mounted() {
          axios
          .get("http://127.0.0.1:5000/load").then(response => {
            this.isLoading = response.data.load})
          .get("http://127.0.0.1:5000/result").then(response => {
            this.myResult = response.data.result})
        }
}
</script>

app.py

from flask import Flask

app = Flask(__name__)
CORS(app)
api = Api(app)

@app.route('/load', methods=['GET'])
def loading_process():                
    return {"load": true}

@app.route('/result', methods=['GET'])
def process():                
    return {"result": "Some result"}

question from:https://stackoverflow.com/questions/65623365/display-progress-bar-vue-flask

Answer 1

There is no use for the endpoint called load. Change mounted to:

mounted() {
   this.isLoading = true;
   axios.get("http://127.0.0.1:5000/result").then(response => {
      this.myResult = response.data.result;
      this.isLoading = false;
   })
}

Before making the api call set isLoading to true, and set it back to false in the callback.