From 08bbfa297249847757b164a5556d37a83c9f535b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 5 Mar 2022 18:51:50 +0530
Subject: [PATCH] fix: request loading indicator

---
 packages/hoppscotch-app/components/http/Response.vue | 11 +++++++++--
 packages/hoppscotch-app/nuxt.config.js               |  5 +++--
 packages/hoppscotch-app/pages/graphql.vue            |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Response.vue b/packages/hoppscotch-app/components/http/Response.vue
index 5f887407c..fbf7a662d 100644
--- a/packages/hoppscotch-app/components/http/Response.vue
+++ b/packages/hoppscotch-app/components/http/Response.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import { computed, defineComponent, watch } from "@nuxtjs/composition-api"
+import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
 import { restResponse$ } from "~/newstore/RESTSession"
 
 export default defineComponent({
@@ -26,6 +26,13 @@ export default defineComponent({
       () => response.value === null || response.value.type === "loading"
     )
 
+    const nuxt = useNuxt()
+
+    watch(response, () => {
+      if (response.value?.type === "loading") nuxt.value.$loading.start()
+      else nuxt.value.$loading.finish()
+    })
+
     return {
       hasResponse,
       response,
diff --git a/packages/hoppscotch-app/nuxt.config.js b/packages/hoppscotch-app/nuxt.config.js
index aa496a0a7..d6afbfb29 100644
--- a/packages/hoppscotch-app/nuxt.config.js
+++ b/packages/hoppscotch-app/nuxt.config.js
@@ -12,8 +12,9 @@ export const options = {
   keywords:
     "hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
   loading: {
-    color: "var(--divider-light-color)",
+    color: "var(--divider-dark-color)",
     background: "var(--primary-color)",
+    accent: "var(--accent-color)",
   },
   app: {
     background: "#202124",
@@ -81,7 +82,7 @@ export default {
 
   // Customize the progress-bar color (https://nuxtjs.org/api/configuration-loading/#customizing-the-progress-bar)
   loading: {
-    color: options.loading.color,
+    color: options.loading.accent,
     continuous: true,
   },
 
diff --git a/packages/hoppscotch-app/pages/graphql.vue b/packages/hoppscotch-app/pages/graphql.vue
index 0158639c7..779fd583d 100644
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/packages/hoppscotch-app/pages/graphql.vue
@@ -33,7 +33,7 @@ export default defineComponent({
     const isLoading = useReadonlyStream(gqlConn.isLoading$, false)
 
     watch(isLoading, () => {
-      if (isLoading) nuxt.value.$loading.start()
+      if (isLoading.value) nuxt.value.$loading.start()
       else nuxt.value.$loading.finish()
     })