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

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

packages/hoppscotch-sh-admin/src/components/teams/Invite.vue

@@ -111,13 +111,14 @@
               />
             </div>
           </div>
-          <div
+          <HoppSmartPlaceholder
             v-if="newMembersList.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :src="`/images/states/dark/add_group.svg`"
+            alt="No invites"
+            text="No invites"
           >
-            <span class="pb-4 text-center"> No invites </span>
             <HoppButtonSecondary label="Add new" filled @click="addNewMember" />
-          </div>
+          </HoppSmartPlaceholder>
         </div>
         <div
           v-if="newMembersList.length"

packages/hoppscotch-sh-admin/src/components/teams/Members.vue

@@ -11,13 +11,10 @@
       </div>
 
       <div class="border rounded border-divider my-8">
-        <div
+        <HoppSmartPlaceholder
           v-if="team?.teamMembers?.length === 0"
-          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+          text="No members in this team. Add members to this team to collaborate"
         >
-          <span class="pb-4 text-center">
-            {{ t('teams.no_members') }}
-          </span>
           <HoppButtonSecondary
             :icon="IconUserPlus"
             :label="t('teams.add_members')"
@@ -27,7 +24,7 @@
               }
             "
           />
-        </div>
+        </HoppSmartPlaceholder>
         <div v-else class="divide-y divide-dividerLight">
           <div
             v-for="(member, index) in membersList"

packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue

@@ -37,16 +37,15 @@
           </div>
         </div>
       </div>
-      <div
+      <HoppSmartPlaceholder
         v-if="team && pendingInvites?.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        text="No pending invites"
       >
-        <span class="text-center">{{ t('teams.no_pending_invites') }} </span>
-      </div>
-      <div v-if="!fetching && error" class="flex flex-col items-center p-4">
-        <icon-lucide-help-circle class="mb-4 svg-icons" />
-        {{ t('teams.error') }}
-      </div>
+        <div v-if="!fetching && error" class="flex flex-col items-center p-4">
+          <icon-lucide-help-circle class="mb-4 svg-icons" />
+          Something went wrong. Please try again later.
+        </div>
+      </HoppSmartPlaceholder>
     </div>
   </div>
 </template>