fix(LoadingBar): isActive reactive prop #12059 (#12062)

Author: rstoenescu

ui/src/components/ajax-bar/QAjaxBar.js

@@ -118,9 +118,8 @@ export default createComponent({
     const progress = ref(0)
     const onScreen = ref(false)
     const animate = ref(true)
-    const calls = ref(0)
 
-    let timer, speed
+    let sessions = 0, timer, speed
 
     const classes = computed(() =>
       `q-loading-bar q-loading-bar--${ props.position }`
@@ -166,42 +165,51 @@ export default createComponent({
       const oldSpeed = speed
       speed = Math.max(0, newSpeed) || 0
 
-      calls.value++
+      sessions++
 
-      if (calls.value > 1) {
+      if (sessions > 1) {
         if (oldSpeed === 0 && newSpeed > 0) {
           planNextStep()
         }
         else if (oldSpeed > 0 && newSpeed <= 0) {
           clearTimeout(timer)
         }
-        return
+
+        return sessions
       }
 
       clearTimeout(timer)
       emit('start')
 
       progress.value = 0
 
-      if (onScreen.value === true) { return }
+      if (onScreen.value === true) {
+        return sessions
+      }
 
       onScreen.value = true
       animate.value = false
       timer = setTimeout(() => {
         animate.value = true
         newSpeed > 0 && planNextStep()
       }, 100)
+
+      return sessions
     }
 
     function increment (amount) {
-      if (calls.value > 0) {
+      if (sessions > 0) {
         progress.value = inc(progress.value, amount)
       }
+
+      return sessions
     }
 
     function stop () {
-      calls.value = Math.max(0, calls.value - 1)
-      if (calls.value > 0) { return }
+      sessions = Math.max(0, sessions - 1)
+      if (sessions > 0) {
+        return sessions
+      }
 
       clearTimeout(timer)
       emit('stop')
@@ -220,6 +228,8 @@ export default createComponent({
       else {
         end()
       }
+
+      return sessions
     }
 
     function planNextStep () {
@@ -250,7 +260,7 @@ export default createComponent({
     })
 
     // expose public methods
-    Object.assign(proxy, { start, stop, increment, calls })
+    Object.assign(proxy, { start, stop, increment })
 
     return () => h('div', {
       class: classes.value,

ui/src/components/ajax-bar/QAjaxBar.json

@@ -73,6 +73,12 @@
           "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing",
           "examples": [ 400, 0 ]
         }
+      },
+      "returns": {
+        "sessions": {
+          "type": "Number",
+          "desc": "Number of active simultaneous sessions"
+        }
       }
     },
 
@@ -84,11 +90,23 @@
           "desc": "Amount (0 < x <= 100) to increment with",
           "examples": [ 1 ]
         }
+      },
+      "returns": {
+        "sessions": {
+          "type": "Number",
+          "desc": "Number of active simultaneous sessions"
+        }
       }
     },
 
     "stop": {
-      "desc": "Notify bar that one process you were waiting has finished"
+      "desc": "Notify bar that one process you were waiting has finished",
+      "returns": {
+        "sessions": {
+          "type": "Number",
+          "desc": "Number of active simultaneous sessions"
+        }
+      }
     }
   }
 }

ui/src/plugins/LoadingBar.js

@@ -49,11 +49,11 @@ const Plugin = defineReactivePlugin({
     Object.assign(this, {
       start (speed) {
         barRef.value.start(speed)
-        Plugin.isActive = barRef.value.calls.value > 0
+        Plugin.isActive = true
       },
       stop () {
-        barRef.value.stop()
-        Plugin.isActive = barRef.value.calls.value > 0
+        const sessions = barRef.value.stop()
+        Plugin.isActive = sessions > 0
       },
       increment () {
         barRef.value.increment.apply(null, arguments)

ui/src/plugins/LoadingBar.json

@@ -16,6 +16,14 @@
     }
   },
 
+  "props": {
+    "isActive": {
+      "type": "Boolean",
+      "desc": "Is LoadingBar active?",
+      "reactive": true
+    }
+  },
+
   "methods": {
     "start": {
       "desc": "Notify bar you've started a background activity",