docs: useLoading

packages/docs/src/.vuepress/config.js

@@ -186,6 +186,7 @@ module.exports = {
                 'use-mutation',
                 'use-subscription',
                 'use-result',
+                'use-loading',
                 'use-apollo-client',
               ],
             },

packages/docs/src/api/use-loading.md

@@ -0,0 +1,78 @@
+# Loading utilities
+
+## useQueryLoading
+
+Returns a boolean `Ref` which is `true` if at least one of the queries used by the component is loading.
+
+Example:
+
+```vue
+<script>
+import { useQuery, useQueryLoading } from '@vue/apollo-composable'
+
+export default {
+  setup () {
+    const { result: one } = useQuery(...)
+    const { result: two } = useQuery(...)
+    const loading = useQueryLoading()
+
+    return {
+      one,
+      two,
+      loading,
+    }
+  }
+}
+</script>
+
+<template>
+  <div v-if="loading">Loading...</div>
+  <div v-else>
+    {{ one }}
+    {{ two }}
+  </div>
+</template>
+```
+
+## useMutationLoading
+
+Returns a boolean `Ref` which is `true` if at least one of the mutations used by the component is loading.
+
+## useSubscriptionLoading
+
+Returns a boolean `Ref` which is `true` if at least one of the subscriptions used by the component is loading.
+
+## useGlobalQueryLoading
+
+Returns a boolean `Ref` which is `true` if at least one of the queries in the entire application is loading.
+
+Example:
+
+```vue
+<script>
+import { useGlobalQueryLoading } from '@vue/apollo-composable'
+
+export default {
+  setup () {
+    const loading = useGlobalQueryLoading()
+
+    return {
+      loading,
+    }
+  }
+}
+</script>
+
+<template>
+  <div v-if="loading" class="top-loading-bar"></div>
+  <router-view>
+</template>
+```
+
+## useGlobalMutationLoading
+
+Returns a boolean `Ref` which is `true` if at least one of the mutations in the entire application is loading.
+
+## useGlobalSubscriptionLoading
+
+Returns a boolean `Ref` which is `true` if at least one of the subscriptions in the entire application is loading.