perf: improve native image tags

2021-11-05 09:13:04 +05:30
parent 9e4d7df7d0
commit 61e5a48b02
28 changed files with 38 additions and 3 deletions
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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>
--- 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") }}
--- 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") }}
--- 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") }}
--- 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>
--- 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") }}