feat: placeholder component in hoppscotch-ui (#3123)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -151,41 +151,21 @@
         </div>
       </div>
     </div>
-    <div
+    <HoppSmartPlaceholder
       v-else-if="testResults && testResults.scriptError"
-      class="flex flex-col items-center justify-center flex-1 p-4"
+      :src="`/images/states/${colorMode.value}/youre_lost.svg`"
+      :alt="`${t('error.test_script_fail')}`"
+      :heading="t('error.test_script_fail')"
+      :text="t('helpers.test_script_fail')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/youre_lost.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
-        :alt="`${t('error.test_script_fail')}`"
-      />
-      <span class="mb-2 font-semibold text-center">
-        {{ t("error.test_script_fail") }}
-      </span>
-      <span
-        class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
-      >
-        {{ t("helpers.test_script_fail") }}
-      </span>
-    </div>
-    <div
+    </HoppSmartPlaceholder>
+    <HoppSmartPlaceholder
       v-else
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/validation.svg`"
+      :alt="`${t('empty.tests')}`"
+      :heading="t('empty.tests')"
+      :text="t('helpers.tests')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/validation.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.tests')}`"
-      />
-      <span class="pb-2 text-center">
-        {{ t("empty.tests") }}
-      </span>
-      <span class="pb-4 text-center">
-        {{ t("helpers.tests") }}
-      </span>
       <HoppButtonSecondary
         outline
         :label="`${t('action.learn_more')}`"
@@ -195,7 +175,7 @@
         reverse
         class="my-4"
       />
-    </div>
+    </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showMyEnvironmentDetailsModal"
       action="new"