From 61e5a48b02d1d8602a8aafbceb4204b18582052a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 5 Nov 2021 09:13:04 +0530
Subject: [PATCH] perf: improve native image tags

---
 .../components/collections/graphql/Collection.vue      |  1 +
 .../components/collections/graphql/Folder.vue          |  1 +
 .../components/collections/graphql/index.vue           |  1 +
 .../hoppscotch-app/components/collections/index.vue    |  1 +
 .../components/collections/my/Collection.vue           |  1 +
 .../components/collections/my/Folder.vue               |  1 +
 .../components/collections/teams/Collection.vue        |  1 +
 .../components/collections/teams/Folder.vue            |  1 +
 .../hoppscotch-app/components/environments/Edit.vue    |  1 +
 .../hoppscotch-app/components/environments/index.vue   |  1 +
 .../components/graphql/RequestOptions.vue              |  1 +
 packages/hoppscotch-app/components/graphql/Sidebar.vue |  2 ++
 packages/hoppscotch-app/components/history/index.vue   |  1 +
 .../hoppscotch-app/components/http/Authorization.vue   |  1 +
 packages/hoppscotch-app/components/http/Body.vue       |  1 +
 .../hoppscotch-app/components/http/BodyParameters.vue  |  1 +
 packages/hoppscotch-app/components/http/Headers.vue    |  1 +
 packages/hoppscotch-app/components/http/Parameters.vue |  1 +
 .../hoppscotch-app/components/http/ResponseMeta.vue    |  1 +
 packages/hoppscotch-app/components/http/TestResult.vue |  1 +
 .../components/lenses/renderers/ImageLensRenderer.vue  |  2 ++
 .../hoppscotch-app/components/realtime/Websocket.vue   |  1 +
 packages/hoppscotch-app/components/teams/Edit.vue      |  1 +
 packages/hoppscotch-app/components/teams/Invite.vue    |  1 +
 packages/hoppscotch-app/components/teams/Team.vue      |  1 +
 packages/hoppscotch-app/components/teams/index.vue     |  1 +
 packages/hoppscotch-app/pages/profile.vue              |  3 ++-
 packages/hoppscotch-app/tsconfig.json                  | 10 ++++++++--
 28 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index b72a4c9bb..e08cf6037 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -166,6 +166,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.collection')"
           />
           <span class="text-center">
             {{ $t("empty.collection") }}
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index 0cd1a2921..32272255a 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -165,6 +165,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.folder')"
           />
           <span class="text-center">
             {{ $t("empty.folder") }}
diff --git a/packages/hoppscotch-app/components/collections/graphql/index.vue b/packages/hoppscotch-app/components/collections/graphql/index.vue
index 016e6c95c..0a7ba01c6 100644
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -74,6 +74,7 @@
         :src="`/images/states/${$colorMode.value}/pack.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.collections')"
       />
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
diff --git a/packages/hoppscotch-app/components/collections/index.vue b/packages/hoppscotch-app/components/collections/index.vue
index 5a8acf639..ccd5ab938 100644
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -112,6 +112,7 @@
         :src="`/images/states/${$colorMode.value}/pack.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.collections')"
       />
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 9e991d04a..2b6560aea 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -192,6 +192,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.collection')"
           />
           <span class="text-center">
             {{ $t("empty.collection") }}
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 5c894183d..a11401c7f 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -174,6 +174,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.folder')"
           />
           <span class="text-center">
             {{ $t("empty.folder") }}
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index 3c3e120e7..86905e4f0 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -188,6 +188,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.collection')"
           />
           <span class="text-center">
             {{ $t("empty.collection") }}
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 0e8ccaee8..38373a40d 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -169,6 +169,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.folder')"
           />
           <span class="text-center">
             {{ $t("empty.folder") }}
diff --git a/packages/hoppscotch-app/components/environments/Edit.vue b/packages/hoppscotch-app/components/environments/Edit.vue
index e65da1f71..92ee0f9d5 100644
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -93,6 +93,7 @@
                 w-16
                 inline-flex
               "
+              :alt="$t('empty.environments')"
             />
             <span class="text-center pb-4">
               {{ $t("empty.environments") }}
diff --git a/packages/hoppscotch-app/components/environments/index.vue b/packages/hoppscotch-app/components/environments/index.vue
index 8f6851fd5..001e8b340 100644
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -110,6 +110,7 @@
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.environments')"
       />
       <span class="text-center pb-4">
         {{ $t("empty.environments") }}
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 782a6158b..cd02a70f1 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -253,6 +253,7 @@
                   w-16
                   inline-flex
                 "
+                :alt="$t('empty.headers')"
               />
               <span class="text-center pb-4">
                 {{ $t("empty.headers") }}
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index a23186cdf..20fcc5791 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -53,6 +53,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.documentation')"
           />
           <span class="text-center">
             {{ $t("empty.documentation") }}
@@ -220,6 +221,7 @@
               w-16
               inline-flex
             "
+            :alt="$t('empty.schema')"
           />
           <span class="text-center">
             {{ $t("empty.schema") }}
diff --git a/packages/hoppscotch-app/components/history/index.vue b/packages/hoppscotch-app/components/history/index.vue
index d7a80e149..557364f68 100644
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -64,6 +64,7 @@
         :src="`/images/states/${$colorMode.value}/history.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.history')"
       />
       <span class="text-center">
         {{ $t("empty.history") }}
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index 89f93b891..86caa002b 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -99,6 +99,7 @@
         :src="`/images/states/${$colorMode.value}/login.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.authorization')"
       />
       <span class="text-center pb-4">
         {{ $t("empty.authorization") }}
diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue
index 6419c0eb5..ea407965e 100644
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -69,6 +69,7 @@
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.body')"
       />
       <span class="text-center pb-4">
         {{ $t("empty.body") }}
diff --git a/packages/hoppscotch-app/components/http/BodyParameters.vue b/packages/hoppscotch-app/components/http/BodyParameters.vue
index 2808fbf25..ab73477a5 100644
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -157,6 +157,7 @@
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.body')"
       />
       <span class="text-center pb-4">
         {{ $t("empty.body") }}
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index 60f6dcf36..8b7d27f05 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -154,6 +154,7 @@
             w-16
             inline-flex
           "
+          :alt="$t('empty.headers')"
         />
         <span class="text-center pb-4">
           {{ $t("empty.headers") }}
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index a6cc22265..b638f2324 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -147,6 +147,7 @@
             w-16
             inline-flex
           "
+          :alt="$t('empty.parameters')"
         />
         <span class="text-center pb-4">
           {{ $t("empty.parameters") }}
diff --git a/packages/hoppscotch-app/components/http/ResponseMeta.vue b/packages/hoppscotch-app/components/http/ResponseMeta.vue
index af56cf2de..a59838e50 100644
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -79,6 +79,7 @@
             w-32
             inline-flex
           "
+          :alt="$t('empty.network_fail')"
         />
         <span class="text-center mb-2">
           {{ $t("error.network_fail") }}
diff --git a/packages/hoppscotch-app/components/http/TestResult.vue b/packages/hoppscotch-app/components/http/TestResult.vue
index f97fbe7cf..eb7966611 100644
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/components/http/TestResult.vue
@@ -82,6 +82,7 @@
         :src="`/images/states/${$colorMode.value}/validation.svg`"
         loading="lazy"
         class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        :alt="$t('empty.tests')"
       />
       <span class="text-center pb-2">
         {{ $t("empty.tests") }}
diff --git a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
index 230406d0b..537e6000b 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
@@ -30,6 +30,8 @@
     <img
       class="border-b border-dividerLight flex max-w-full flex-1"
       :src="imageSource"
+      loading="lazy"
+      :alt="imageSource"
     />
   </div>
 </template>
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index 66492946c..6bcc383d0 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -156,6 +156,7 @@
                   w-16
                   inline-flex
                 "
+                :alt="$t('empty.protocols')"
               />
               <span class="text-center">
                 {{ $t("empty.protocols") }}
diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index 12c498999..a2224f282 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -70,6 +70,7 @@
                 w-16
                 inline-flex
               "
+              :alt="$t('empty.members')"
             />
             <span class="text-center pb-4">
               {{ $t("empty.members") }}
diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
index 31c2923e5..b8fd778d1 100644
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -260,6 +260,7 @@
                 w-16
                 inline-flex
               "
+              :alt="$t('empty.invites')"
             />
             <span class="text-center pb-4">
               {{ $t("empty.invites") }}
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 849f11a90..9823a2ec2 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -33,6 +33,7 @@
             :src="member.user.photoURL || undefined"
             :alt="member.user.displayName"
             class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
+            loading="lazy"
           />
         </div>
       </div>
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index 0a4fb1946..5ecf7bbce 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -38,6 +38,7 @@
             w-16
             inline-flex
           "
+          :alt="$t('empty.teams')"
         />
         <span class="text-center mb-4">
           {{ $t("empty.teams") }}
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 8f8ab1440..c186c48d3 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -18,6 +18,7 @@
               v-if="currentUser.photoURL"
               :src="currentUser.photoURL"
               class="rounded-lg ring-4 ring-primary h-16 w-16"
+              :alt="currentUser.displayName"
             />
             <SmartIcon v-else name="user" class="svg-icons" />
             <div class="ml-4">
@@ -25,7 +26,7 @@
                 {{ currentUser.displayName || $t("state.nothing_found") }}
               </label>
               <p class="flex text-secondaryLight items-center">
-                {{ currentUser.email || $t("state.nothing_found") }}
+                {{ currentUser.email }}
                 <SmartIcon
                   v-if="currentUser.emailVerified"
                   name="verified"
diff --git a/packages/hoppscotch-app/tsconfig.json b/packages/hoppscotch-app/tsconfig.json
index ad08f4af8..9f21dcfe8 100644
--- a/packages/hoppscotch-app/tsconfig.json
+++ b/packages/hoppscotch-app/tsconfig.json
@@ -15,10 +15,16 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@types/node", "@nuxt/types", "@nuxtjs/i18n", "@nuxtjs/toast", "unplugin-vue2-script-setup/types"]
+    "types": [
+      "@types/node",
+      "@nuxt/types",
+      "@nuxtjs/i18n",
+      "@nuxtjs/toast",
+      "unplugin-vue2-script-setup/types"
+    ]
   },
   "exclude": ["node_modules", ".nuxt", "dist"],
   "vueCompilerOptions": {
     "experimentalCompatMode": 2
-  },
+  }
 }