Merge branch 'refactor/ui' of https://github.com/hoppscotch/hoppscotch into refactor/ui

components/http/Request.vue

@@ -204,7 +204,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useContext } from "@nuxtjs/composition-api"
+import {
+  defineComponent,
+  ref,
+  useContext,
+  watch,
+} from "@nuxtjs/composition-api"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -216,7 +221,11 @@ import {
 } from "~/newstore/RESTSession"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
-import { useStreamSubscriber, useStream } from "~/helpers/utils/composables"
+import {
+  useStreamSubscriber,
+  useStream,
+  useNuxt,
+} from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useSetting } from "~/newstore/settings"
@@ -240,6 +249,7 @@ export default defineComponent({
       $toast,
       app: { i18n },
     } = useContext()
+    const nuxt = useNuxt()
     const t = i18n.t.bind(i18n)
     const { subscribeToStream } = useStreamSubscriber()
 
@@ -255,11 +265,19 @@ export default defineComponent({
     const hasNavigatorShare = !!navigator.share
 
     // Template refs
-    //
     const methodOptions = ref<any | null>(null)
     const saveOptions = ref<any | null>(null)
     const sendOptions = ref<any | null>(null)
 
+    // Update Nuxt Loading bar
+    watch(loading, () => {
+      if (loading.value) {
+        nuxt.value.$loading.start()
+      } else {
+        nuxt.value.$loading.finish()
+      }
+    })
+
     const newSendRequest = () => {
       loading.value = true
 

helpers/keybindings.ts

@@ -81,7 +81,6 @@ function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
   const modifierKey = getActiveModifier(ev)
 
   const target = ev.target
-  console.log(target)
 
   if (!modifierKey && !(isDOMElement(target) && isTypableElement(target))) {
     // Check if we are having singulars instead

helpers/utils/composables.ts

@@ -6,9 +6,12 @@ import {
   Ref,
   ref,
   watch,
+  wrapProperty,
 } from "@nuxtjs/composition-api"
 import { Observable, Subscription } from "rxjs"
 
+export const useNuxt = wrapProperty("$nuxt")
+
 export function useReadonlyStream<T>(
   stream$: Observable<T>,
   initialValue: T