How loadingBar.increment() does work?



  • I have a method that calls some async functions and in the callback I want to increment the loadingBar by some value. So when this function finishes running- or when the method reaches that level the loadingbar should increment.
    However it seems the loadingBar increments no matter what value I put.

    setMarketParameters() {
              this.$q.loadingBar.start()
              this.$q.loadingBar.increment(0.1)
              window.eel.valuate()((val) => {
                window.eel.summarizePortfolio("All", "All", "All")(val => {
                  this.updatePortfolioSummary(val);
                  this.$q.loadingBar.increment(0.3)
                  window.eel.getDatatapeUniqueProductFiltering()(val => {
                    this.updateProductOptions(val);
                    this.$q.loadingBar.increment(0.2)
                    window.eel.getDatatapeUniqueRiskFiltering()(val => {
                              });
                          });
                        });
              }
    

    So in my understanding when the nested functions are called then at that time the bar should be incremented by that value (0.3) and then 0.2 when it reaches it. But instead its getting incremented by small chunks no matter what and kind of stays around 95% until all the functions are finished running.



  • Well, I had a similar issue and I solved it by declaring the method as async and each function with the await modiffier



  • async onSubmit() {
          this.waitingForResponse = true;
          console.log('Trying to Login');
          const object = {};
          object['email'] = this.email;
          object['password'] = this.password;
          await this.$store
            .dispatch('auth/login', object)
            .then(() => {
              this.$router.push({ name: 'Home' });
            })
            .catch(error => {
              this.$q.notify({
                type: 'negative',
                message: error
              });
            });
          this.waitingForResponse = false;
        }
    

    The var waitingForResponse is binded to the loading property of a button, until I didn’t declare the onSubmit method as async, the button status didn’t change


Log in to reply