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

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

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -98,17 +98,14 @@
                 </div>
               </div>
             </div>
-            <div
+            <HoppSmartPlaceholder
               v-if="
                 E.isRight(pendingInvites.data) &&
                 pendingInvites.data.right.team.teamInvitations.length === 0
               "
-              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+              :text="t('empty.pending_invites')"
             >
-              <span class="text-center">
-                {{ t("empty.pending_invites") }}
-              </span>
-            </div>
+            </HoppSmartPlaceholder>
             <div
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
@@ -221,25 +218,18 @@
               />
             </div>
           </div>
-          <div
+          <HoppSmartPlaceholder
             v-if="newInvites.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :src="`/images/states/${colorMode.value}/add_group.svg`"
+            :alt="`${t('empty.invites')}`"
+            :text="`${t('empty.invites')}`"
           >
-            <img
-              :src="`/images/states/${colorMode.value}/add_group.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-              :alt="`${t('empty.invites')}`"
-            />
-            <span class="pb-4 text-center">
-              {{ t("empty.invites") }}
-            </span>
             <HoppButtonSecondary
               :label="t('add.new')"
               filled
               @click="addNewInvitee"
             />
-          </div>
+          </HoppSmartPlaceholder>
         </div>
         <div
           v-if="newInvites.length"