From 6d7b0e11a3e352bd30fdf4592f6d2e789798391c Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Wed, 20 Dec 2023 22:19:17 +0530
Subject: [PATCH] fix: add loading and error state

---
 .../hoppscotch-common/src/pages/e/_id.vue     | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/hoppscotch-common/src/pages/e/_id.vue b/packages/hoppscotch-common/src/pages/e/_id.vue
index 94085ae1b..09545d8fb 100644
--- a/packages/hoppscotch-common/src/pages/e/_id.vue
+++ b/packages/hoppscotch-common/src/pages/e/_id.vue
@@ -18,6 +18,41 @@
       :properties="properties"
       :shared-request-i-d="sharedRequestID"
     />
+    <div v-else class="flex flex-1 flex-col items-center justify-center p-4">
+      <div
+        v-if="sharedRequestDetails.loading"
+        class="flex flex-1 flex-col items-center justify-center p-4"
+      >
+        <HoppSmartSpinner />
+      </div>
+      <div v-else>
+        <div
+          v-if="
+            !sharedRequestDetails.loading && E.isLeft(sharedRequestDetails.data)
+          "
+          class="flex flex-col items-center p-4"
+        >
+          <icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
+          <h1 class="heading text-center">
+            {{ t("error.invalid_link") }}
+          </h1>
+          <p class="mt-2 text-center">
+            {{ t("error.invalid_embed_link") }}
+          </p>
+        </div>
+        <div
+          v-if="
+            !sharedRequestDetails.loading &&
+            E.isRight(sharedRequestDetails.data)
+          "
+          class="flex flex-1 flex-col items-center justify-center p-4"
+        >
+          <h1 class="heading">
+            {{ t("state.loading") }}
+          </h1>
+        </div>
+      </div>
+    </div>
   </div>
 </template>