feat(Loading): ability to group instances; allows multiple instances …

…simultaneously while managing the state of each group individually

docs/public/examples/Loading/MultipleGroups.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="q-pa-md">
+    <q-btn color="purple" @click="showMultipleGroups" label="Show Multiple Groups" />
+  </div>
+</template>
+
+<script>
+import { useQuasar } from 'quasar'
+import { onBeforeUnmount } from 'vue'
+
+export default {
+  setup () {
+    const $q = useQuasar()
+    let timer
+
+    onBeforeUnmount(() => {
+      if (timer !== void 0) {
+        clearTimeout(timer)
+        $q.loading.hide()
+      }
+    })
+
+    return {
+      showMultipleGroups () {
+        const first = $q.loading.show({
+          group: 'first',
+          message: 'This is first group',
+          spinnerColor: 'amber',
+          messageColor: 'amber'
+        })
+
+        // hiding in 2s
+        timer = setTimeout(() => {
+          const second = $q.loading.show({
+            group: 'second',
+            message: 'This is second group'
+          })
+
+          timer = setTimeout(() => {
+            // we hide second one (only); but we will still have the first one active
+            second()
+
+            // we update 'first' group message (just highlighting how it can be done);
+            // note that updating here is not required to show the remaining 'first' group
+            first({
+              message: 'We hide second group and updated first group message'
+            })
+
+            timer = setTimeout(() => {
+              // we hide all that may be showing
+              $q.loading.hide()
+              timer = void 0
+            }, 2000)
+          }, 2000)
+        }, 1500)
+      }
+    }
+  }
+}
+</script>

docs/public/examples/Loading/WithMessageSanitized.vue

@@ -23,7 +23,7 @@ export default {
     return {
       showLoading () {
         $q.loading.show({
-          message: 'Some important <b>process</b> is in progress.<br/><span class="text-primary">Hang on...</span>',
+          message: 'Some important <b>process</b> is in progress.<br/><span class="text-amber text-italic">Please wait...</span>',
           html: true
         })
 

docs/src/pages/quasar-cli-vite/quasar-config-js.md

@@ -480,6 +480,8 @@ interface QuasarStaticBuildConfiguration {
   rawDefine?: { [index: string]: string };
 
   /**
+   * (requires @quasar/app-vite v1.1+)
+   *
    * Build production assets with or without the hash part in filenames.
    * Example: "454d87bd" in "assets/index.454d87bd.js"
    *

docs/src/pages/quasar-plugins/loading.md

@@ -63,17 +63,80 @@ Loading.show({
 Loading.hide()
 ```
 
+### Default options
+
 <doc-example title="Default options" file="Loading/Default" />
 
+### Customization
+
 <doc-example title="With message" file="Loading/WithMessage" />
 
 <doc-example title="With customized box" file="Loading/WithBox" />
 
-<doc-example title="With unsafe message, but sanitized" file="Loading/WithMessageSanitized" />
-
 <doc-example title="Customized" file="Loading/Customized" />
 
 <doc-example title="Show and Change" file="Loading/ShowAndChange" />
 
+### Content sanitization
+
+<doc-example title="With unsafe message, but sanitized" file="Loading/WithMessageSanitized" />
+
+### Multiple groups in parallel <q-badge align="top" color="brand-primary" label="v2.8+" />
+
+::: tip
+When you have multiple processes that occur in parallel then you can group Loading instances so that you can manage the Loading state per group (individually).
+:::
+
+Specify the `group` property when spawning each of your Loading instances and you can update or hide them by using the returned function.
+
+Obviously, we can only display one group at a time, so the order in which they are spawned determines the priority in which they are shown (the last one has priority over the previous ones; LIFO).
+
+<doc-example title="Multiple groups" file="Loading/MultipleGroups" />
+
+You can play with the returning function to show/update/hide the group or just call `Loading.show({ group: '..group_name..', ... })` or `Loading.hide('..group_name..')`.
+
+The following two ways are perfectly equivalent (and you can even mix the calls between them):
+
+```js
+/**
+ * First way
+ */
+
+// we spawn the group
+const myLoadingGroup = Loading.show({
+  group: 'my-group',
+  message: 'Some message'
+})
+
+// with params, so we update this group
+myLoadingGroup({ message: 'Second message' })
+
+// no params, so we instruct Quasar to hide the group
+myLoadingGroup()
+
+/**
+ * Second, equivalent way
+ */
+
+// we spawn the group
+Loading.show({
+  group: 'my-group',
+  message: 'Some message'
+})
+
+// we update the group (in this case we need to specify the group name)
+Loading.show({
+  group: 'my-group'
+  message: 'Second message'
+})
+
+// we hide this specific group
+Loading.hide('my-group')
+```
+
+::: warning
+Please remember that calling `Loading.hide()` with no parameters will hide all the groups. So if you use groups, you may want to always call the hide() method with a group name.
+:::
+
 ### Setting Up Defaults
 Should you wish to set up some defaults, rather than specifying them each time, you can do so by using quasar.config.js > framework > config > loading: {...} or by calling `Loading.setDefaults({...})` or `$q.loading.setDefaults({...})`.

ui/dev/src/pages/global/loading.vue

@@ -65,6 +65,31 @@
           Show for 1000ms
         </q-btn>
       </div>
+
+      <div class="q-my-md">
+        Show with groups
+      </div>
+      <div class="row q-gutter-sm">
+        <q-btn push color="black" @click="showGroup1">
+          One.1 > Two.1 > One.2
+        </q-btn>
+
+        <q-btn push color="black" @click="showGroup2">
+          One.1 > Two.1 > Three.1 > One.2
+        </q-btn>
+
+        <q-btn push color="black" @click="showGroup3">
+          One.1 > Default
+        </q-btn>
+
+        <q-btn push color="black" @click="showGroup4">
+          One.1
+        </q-btn>
+
+        <q-btn push color="black" @click="showGroup5">
+          hide(group): One.1 > Two.1 > Three.1 > One.2
+        </q-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -217,6 +242,132 @@ export default {
           show({ delay: 500 }, timeout)
           Loading.show({ delay: 500 })
         }
+      },
+
+      showGroup1 () {
+        const one = $q.loading.show({
+          group: 'one',
+          message: 'One.1'
+        })
+
+        setTimeout(() => {
+          one({ message: 'One.2' })
+
+          const two = $q.loading.show({
+            group: 'two',
+            message: 'Two.1'
+          })
+
+          setTimeout(() => {
+            two()
+            setTimeout(() => {
+              one()
+            }, 1000)
+          }, 1000)
+        }, 1000)
+      },
+
+      showGroup2 () {
+        const one = $q.loading.show({
+          group: 'one',
+          message: 'One.1'
+        })
+
+        setTimeout(() => {
+          one({
+            spinner: QSpinnerGears,
+            message: 'One.2'
+          })
+
+          const two = $q.loading.show({
+            group: 'two',
+            message: 'Two.1'
+          })
+
+          setTimeout(() => {
+            const third = $q.loading.show({
+              group: 'third',
+              message: 'Three.1'
+            })
+            two()
+
+            setTimeout(() => {
+              third()
+              setTimeout(() => {
+                one()
+              }, 1000)
+            }, 1000)
+          }, 1000)
+        }, 1000)
+      },
+
+      showGroup3 () {
+        const one = $q.loading.show({
+          group: 'one',
+          message: 'One.1'
+        })
+
+        setTimeout(() => {
+          one({ message: 'One.2' })
+
+          $q.loading.show({
+            message: 'Default'
+          })
+
+          setTimeout(() => {
+            $q.loading.hide()
+            one()
+          }, 1000)
+        }, 1000)
+      },
+
+      showGroup4 () {
+        const one = $q.loading.show({
+          group: 'one',
+          message: 'One.1'
+        })
+
+        setTimeout(() => {
+          one()
+          one()
+          $q.loading.hide()
+          one()
+        }, 1000)
+      },
+
+      showGroup5 () {
+        $q.loading.show({
+          group: 'one',
+          message: 'One.1'
+        })
+
+        setTimeout(() => {
+          $q.loading.show({
+            group: 'one',
+            spinner: QSpinnerGears,
+            message: 'One.2'
+          })
+
+          $q.loading.show({
+            group: 'two',
+            message: 'Two.1'
+          })
+
+          setTimeout(() => {
+            $q.loading.show({
+              group: 'third',
+              message: 'Three.1'
+            })
+            $q.loading.hide('two')
+
+            setTimeout(() => {
+              $q.loading.hide('third')
+              setTimeout(() => {
+                $q.loading.hide('one')
+              }, 1000)
+            }, 1000)
+          }, 1000)
+        }, 1000)
       }
     }
   }