perf: improve native image tags

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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>

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

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"

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