⚡ Added loader, changed webSocket icon

layouts/default.vue

@@ -108,7 +108,7 @@
               :class="linkActive('/websocket')"
               v-tooltip.right="'WebSocket'"
             >
-              <i class="material-icons">cloud</i>
+              <i class="material-icons">settings_input_hdmi</i>
             </nuxt-link>
             <nuxt-link
               to="/graphql"
@@ -156,7 +156,23 @@
                   </a>
                 </li>
                 <li>
-                  <a href="#response" v-tooltip.right="'Response'">
+                  <a href="#response" v-tooltip.right="'Communication'">
+                    <i class="material-icons">cloud_download</i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <div v-else-if="['/graphql'].includes($route.path)">
+            <nav class="secondary-nav">
+              <ul>
+                <li>
+                  <a href="#endpoint" v-tooltip.right="'Endpoint'">
+                    <i class="material-icons">cloud_upload</i>
+                  </a>
+                </li>
+                <li>
+                  <a href="#schema" v-tooltip.right="'Schema'">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>

pages/graphql.vue

@@ -4,21 +4,13 @@
       <ul>
         <li>
           <label for="url">URL</label>
-          <input 
+          <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
-            id="url"
-            type="url"
-            v-model="url"
-            @keyup.enter="getSchema()"
-          />
         </li>
         <li>
           <label for="get" class="hide-on-small-screen">&nbsp;</label>
-          <button
+          <button id="get" name="get" @click="getSchema">
-            id="get"
-            name="get"
-            @click="getSchema"
-          >
             Get Schema
+            <span><i class="material-icons">send</i></span>
           </button>
         </li>
       </ul>
@@ -41,34 +33,48 @@
   </div>
 </template>
 
-<style>
+<style></style>
-</style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
-import * as gql from 'graphql';
+import * as gql from "graphql";
-import AceEditor from '../components/ace-editor';
+import AceEditor from "../components/ace-editor";
 
 export default {
   components: {
-    'pw-section': () => import('../components/section'),
+    "pw-section": () => import("../components/section"),
     Editor: AceEditor
   },
   data() {
     return {
       url: "https://rickandmortyapi.com/graphql",
-      schemaString: ''
+      schemaString: ""
-    }
+    };
   },
   methods: {
     getSchema() {
-      axios.post(this.url, {
+      const startTime = Date.now();
+
+      // Start showing the loading bar as soon as possible.
+      // The nuxt axios module will hide it when the request is made.
+      this.$nuxt.$loading.start();
+
+      axios
+        .post(this.url, {
           query: gql.getIntrospectionQuery()
-      }).then((res) => {
+        })
+        .then(res => {
           const schema = gql.buildClientSchema(res.data.data);
-        this.schemaString = gql.printSchema(schema, { commentDescriptions: true });
+          this.schemaString = gql.printSchema(schema, {
+            commentDescriptions: true
+          });
+          this.$nuxt.$loading.finish();
+          const duration = Date.now() - startTime;
+          this.$toast.info(`Finished in ${duration}ms`, {
+            icon: "done"
+          });
         });
     }
   }
-}
+};
 </script>

pages/index.vue

@@ -125,7 +125,8 @@
                 <div class="flex-wrap">
                   <span>
                     <pw-toggle :on="rawInput" @change="rawInput = $event"
-                      >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
+                      >Raw Input
+                      {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
                     >
                   </span>
                   <div>
@@ -247,7 +248,9 @@
                 id="code"
                 v-on:click="isHidden = !isHidden"
                 :disabled="!isValidURL"
-                v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
+                v-tooltip.bottom="{
+                  content: isHidden ? 'Show Code' : 'Hide Code'
+                }"
               >
                 <i class="material-icons">flash_on</i>
               </button>
@@ -314,7 +317,11 @@
           <div class="tab">
             <br />
 
-            <pw-section class="cyan" label="Authentication" ref="authentication">
+            <pw-section
+              class="cyan"
+              label="Authentication"
+              ref="authentication"
+            >
               <ul>
                 <li>
                   <div class="flex-wrap">
@@ -360,10 +367,14 @@
                       ref="switchVisibility"
                       @click="switchVisibility"
                     >
-                      <i class="material-icons" v-if="passwordFieldType === 'text'"
+                      <i
+                        class="material-icons"
+                        v-if="passwordFieldType === 'text'"
                         >visibility</i
                       >
-                      <i class="material-icons" v-if="passwordFieldType !== 'text'"
+                      <i
+                        class="material-icons"
+                        v-if="passwordFieldType !== 'text'"
                         >visibility_off</i
                       >
                     </button>
@@ -554,7 +565,12 @@
 
         <br />
 
-        <pw-section class="purple" id="response" label="Response" ref="response">
+        <pw-section
+          class="purple"
+          id="response"
+          label="Response"
+          ref="response"
+        >
           <ul>
             <li>
               <label for="status">status</label>
@@ -626,7 +642,9 @@
                 v-if="response.body && responseType === 'text/html'"
               >
                 <button class="icon" @click.prevent="togglePreview">
-                  <i class="material-icons" v-if="!previewEnabled">visibility</i>
+                  <i class="material-icons" v-if="!previewEnabled"
+                    >visibility</i
+                  >
                   <i class="material-icons" v-else>visibility_off</i>
                   <span>{{
                     previewEnabled ? "Hide Preview" : "Preview HTML"
@@ -643,7 +661,10 @@
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">History</label>
           <div class="tab">
-            <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+            <history
+              @useHistory="handleUseHistory"
+              ref="historyComponent"
+            ></history>
           </div>
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">Collections</label>