fix: catch network failed error and show prompt in response section

components/http/ResponseMeta.vue

@@ -50,12 +50,38 @@
         reverse
       />
     </div>
-    <div v-else>
+    <div v-else class="flex flex-col flex-1">
-      <i v-if="response.type === 'loading'" class="animate-spin material-icons">
+      <div v-if="response.type === 'loading'">
-        refresh
+        <i class="animate-spin material-icons"> refresh </i>
-      </i>
+      </div>
       <div
-        v-else
+        v-if="response.type === 'network_fail'"
+        class="
+          flex flex-col flex-1
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">cloud_off</i>
+        <span class="text-center pb-2">
+          {{ $t("error.network_fail") }}
+        </span>
+        <span class="text-center pb-4">
+          {{ $t("helpers.network_fail") }}
+        </span>
+        <ButtonSecondary
+          outline
+          :label="$t('action.learn_more')"
+          to="https://docs.hoppscotch.io"
+          blank
+          icon="open_in_new"
+          reverse
+        />
+      </div>
+      <div
+        v-if="response.type === 'success' || 'fail'"
         :class="statusCategory.className"
         class="font-semibold space-x-4"
       >
@@ -84,7 +110,7 @@ export default {
   props: {
     response: {
       type: Object,
-      default: () => {},
+      default: () => null,
     },
   },
   computed: {

components/lenses/renderers/HTMLLensRenderer.vue

@@ -141,7 +141,7 @@ export default {
 .covers-response {
   @apply absolute;
   @apply inset-0;
-  @apply bg-primary;
+  @apply bg-white;
   @apply h-full;
   @apply w-full;
   @apply border;

lang/en-US.json

@@ -250,7 +250,8 @@
   },
   "error": {
     "something_went_wrong": "Something went wrong",
-    "check_console_details": "Check console log for details."
+    "check_console_details": "Check console log for details.",
+    "network_fail": "Could not send request"
   },
   "helpers": {
     "authorization": "The authorization header will be automatically generated when you send the request.",
@@ -258,7 +259,8 @@
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "offline_short": "You seem to be offline.",
     "offline": "You seem to be offline. Data in this workspace might not be up to date.",
-    "tests": "Write a test script to automate debugging"
+    "tests": "Write a test script to automate debugging.",
+    "network_fail": "Unable to reach the API endpoint. Check your network connection and try again."
   },
   "options": "Options",
   "communication": "Communication",