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

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

packages/hoppscotch-common/src/pages/profile.vue

@@ -8,25 +8,18 @@
         >
           <HoppSmartSpinner class="mb-4" />
         </div>
-        <div
+        <HoppSmartPlaceholder
           v-else-if="currentUser === null"
-          class="flex flex-col items-center justify-center"
+          :src="`/images/states/${colorMode.value}/login.svg`"
+          :alt="`${t('empty.profile')}`"
+          :text="`${t('empty.profile')}`"
         >
-          <img
-            :src="`/images/states/${colorMode.value}/login.svg`"
-            loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-24 h-24 my-4"
-            :alt="`${t('empty.parameters')}`"
-          />
-          <p class="pb-4 text-center text-secondaryLight">
-            {{ t("empty.profile") }}
-          </p>
           <HoppButtonPrimary
             :label="t('auth.login')"
             class="mb-4"
             @click="invokeAction('modals.login.toggle')"
           />
-        </div>
+        </HoppSmartPlaceholder>
         <div v-else class="space-y-8">
           <div
             class="h-24 rounded bg-primaryLight -mb-11 md:h-32"

packages/hoppscotch-common/src/pages/realtime/mqtt.vue

@@ -136,28 +136,19 @@
           </span>
         </div>
       </div>
-
-      <div
+      <HoppSmartPlaceholder
         v-if="topics.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        :src="`/images/states/${colorMode.value}/pack.svg`"
+        :alt="`${t('empty.subscription')}`"
+        :text="`${t('empty.subscription')}`"
       >
-        <img
-          :src="`/images/states/${colorMode.value}/pack.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="`${t('empty.subscription')}`"
-        />
-        <span class="pb-4 text-center">
-          {{ t("empty.subscription") }}
-        </span>
         <HoppButtonSecondary
           :label="t('mqtt.new')"
           filled
           outline
           @click="showSubscriptionModal(true)"
         />
-      </div>
-
+      </HoppSmartPlaceholder>
       <div v-else>
         <div
           v-for="(topic, index) in topics"

packages/hoppscotch-common/src/pages/realtime/socketio.vue

@@ -190,19 +190,12 @@
               />
             </div>
           </div>
-          <div
+          <HoppSmartPlaceholder
             v-if="authType === 'None'"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :src="`/images/states/${colorMode.value}/login.svg`"
+            :alt="`${t('socketio.connection_not_authorized')}`"
+            :text="`${t('socketio.connection_not_authorized')}`"
           >
-            <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("socketio.connection_not_authorized") }}
-            </span>
             <HoppButtonSecondary
               outline
               :label="t('app.documentation')"
@@ -212,7 +205,7 @@
               reverse
               class="mb-4"
             />
-          </div>
+          </HoppSmartPlaceholder>
           <div
             v-if="authType === 'Bearer'"
             class="flex flex-1 border-b border-dividerLight"

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -159,20 +159,13 @@
               </div>
             </template>
           </draggable>
-          <div
+          <HoppSmartPlaceholder
             v-if="protocols.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.protocols')}`"
+            :text="`${t('empty.protocols')}`"
           >
-            <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.protocols')}`"
-            />
-            <span class="mb-4 text-center">
-              {{ t("empty.protocols") }}
-            </span>
-          </div>
+          </HoppSmartPlaceholder>
         </HoppSmartTab>
       </HoppSmartTabs>
     </template>