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

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

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

@@ -113,17 +113,12 @@
         />
       </div>
     </div>
-    <div
+    <HoppSmartPlaceholder
       v-if="auth.authType === 'none'"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/login.svg`"
+      :alt="`${t('empty.authorization')}`"
+      :text="t('empty.authorization')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/login.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.authorization')}`"
-      />
-      <span class="pb-4 text-center">{{ t("empty.authorization") }}</span>
       <HoppButtonSecondary
         outline
         :label="t('app.documentation')"
@@ -133,7 +128,7 @@
         reverse
         class="mb-4"
       />
-    </div>
+    </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
         <div v-if="auth.authType === 'basic'">

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

@@ -102,17 +102,12 @@
       v-model="body"
     />
     <HttpRawBody v-else-if="body.contentType !== null" v-model="body" />
-    <div
+    <HoppSmartPlaceholder
       v-if="body.contentType == null"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
+      :alt="`${t('empty.body')}`"
+      :text="t('empty.body')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.body')}`"
-      />
-      <span class="pb-4 text-center">{{ t("empty.body") }}</span>
       <HoppButtonSecondary
         outline
         :label="`${t('app.documentation')}`"
@@ -122,7 +117,7 @@
         reverse
         class="mb-4"
       />
-    </div>
+    </HoppSmartPlaceholder>
   </div>
 </template>
 

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

@@ -152,17 +152,12 @@
       </template>
     </draggable>
 
-    <div
+    <HoppSmartPlaceholder
       v-if="workingParams.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
+      :alt="`${t('empty.body')}`"
+      :text="t('empty.body')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.body')}`"
-      />
-      <span class="pb-4 text-center">{{ t("empty.body") }}</span>
       <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
@@ -170,7 +165,7 @@
         class="mb-4"
         @click="addBodyParam"
       />
-    </div>
+    </HoppSmartPlaceholder>
   </div>
 </template>
 

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

@@ -56,20 +56,19 @@
                     }
                   "
                 />
-                <div
+                <HoppSmartPlaceholder
                   v-if="
                     !(
                       filteredCodegenDefinitions.length !== 0 ||
                       CodegenDefinitions.length === 0
                     )
                   "
-                  class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+                  :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
                 >
-                  <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-                  <span class="my-2 text-center">
-                    {{ t("state.nothing_found") }} "{{ searchQuery }}"
-                  </span>
-                </div>
+                  <template #icon>
+                    <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+                  </template>
+                </HoppSmartPlaceholder>
               </div>
             </div>
           </template>

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

@@ -202,17 +202,12 @@
           </div>
         </template>
       </draggable>
-      <div
+      <HoppSmartPlaceholder
         v-if="workingHeaders.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        :src="`/images/states/${colorMode.value}/add_category.svg`"
+        :alt="`${t('empty.headers')}`"
+        :text="t('empty.headers')"
       >
-        <img
-          :src="`/images/states/${colorMode.value}/add_category.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="`${t('empty.headers')}`"
-        />
-        <span class="pb-4 text-center">{{ t("empty.headers") }}</span>
         <HoppButtonSecondary
           filled
           :label="`${t('add.new')}`"
@@ -220,7 +215,7 @@
           class="mb-4"
           @click="addHeader"
         />
-      </div>
+      </HoppSmartPlaceholder>
     </div>
   </div>
 </template>

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

@@ -145,18 +145,12 @@
           </div>
         </template>
       </draggable>
-
-      <div
+      <HoppSmartPlaceholder
         v-if="workingParams.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        :src="`/images/states/${colorMode.value}/add_files.svg`"
+        :alt="`${t('empty.parameters')}`"
+        :text="t('empty.parameters')"
       >
-        <img
-          :src="`/images/states/${colorMode.value}/add_files.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="`${t('empty.parameters')}`"
-        />
-        <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
         <HoppButtonSecondary
           :label="`${t('add.new')}`"
           :icon="IconPlus"
@@ -164,7 +158,7 @@
           class="mb-4"
           @click="addParam"
         />
-      </div>
+      </HoppSmartPlaceholder>
     </div>
   </div>
 </template>

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

@@ -11,51 +11,29 @@
         <HoppSmartSpinner class="my-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
-      <div
+      <HoppSmartPlaceholder
         v-if="response.type === 'network_fail'"
-        class="flex flex-col items-center justify-center flex-1 p-4"
+        :src="`/images/states/${colorMode.value}/youre_lost.svg`"
+        :alt="`${t('error.network_fail')}`"
+        :heading="t('error.network_fail')"
+        :text="t('helpers.network_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.network_fail')}`"
-        />
-        <span class="mb-2 font-semibold text-center">
-          {{ t("error.network_fail") }}
-        </span>
-        <span
-          class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
-        >
-          {{ t("helpers.network_fail") }}
-        </span>
         <AppInterceptor class="p-2 border rounded border-dividerLight" />
-      </div>
-      <div
+      </HoppSmartPlaceholder>
+      <HoppSmartPlaceholder
         v-if="response.type === 'script_fail'"
-        class="flex flex-col items-center justify-center flex-1 p-4"
+        :src="`/images/states/${colorMode.value}/youre_lost.svg`"
+        :alt="`${t('error.script_fail')}`"
+        :label="t('error.script_fail')"
+        :text="t('helpers.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.script_fail')}`"
-        />
-        <span class="mb-2 font-semibold text-center">
-          {{ t("error.script_fail") }}
-        </span>
-        <span
-          class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
-        >
-          {{ t("helpers.script_fail") }}
-        </span>
         <div
-          class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
+          class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
         >
           {{ response.error.name }}: {{ response.error.message }}<br />
           {{ response.error.stack }}
         </div>
-      </div>
+      </HoppSmartPlaceholder>
       <div
         v-if="response.type === 'success' || response.type === 'fail'"
         class="flex items-center font-semibold text-tiny"

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"

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

@@ -143,19 +143,12 @@
           </div>
         </template>
       </draggable>
-      <div
+      <HoppSmartPlaceholder
         v-if="workingUrlEncodedParams.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        :src="`/images/states/${colorMode.value}/add_category.svg`"
+        :alt="`${t('empty.body')}`"
+        :text="t('empty.body')"
       >
-        <img
-          :src="`/images/states/${colorMode.value}/add_category.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="`${t('empty.body')}`"
-        />
-        <span class="pb-4 text-center">
-          {{ t("empty.body") }}
-        </span>
         <HoppButtonSecondary
           filled
           :label="`${t('add.new')}`"
@@ -163,7 +156,7 @@
           class="mb-4"
           @click="addUrlEncodedParam"
         />
-      </div>
+      </HoppSmartPlaceholder>
     </div>
   </div>
 </template>