fix: request loading indicator

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,

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,
   },
 

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()
     })