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

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

packages/hoppscotch-common/src/components/workspace/Selector.vue

@@ -15,19 +15,12 @@
         <HoppSmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
-      <div
+      <HoppSmartPlaceholder
         v-if="!loading && myTeams.length === 0"
-        class="flex flex-col items-center justify-center flex-1 p-4 text-secondaryLight"
+        :src="`/images/states/${colorMode.value}/add_group.svg`"
+        :alt="`${t('empty.teams')}`"
+        :text="`${t('empty.teams')}`"
       >
-        <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-8"
-          :alt="`${t('empty.teams')}`"
-        />
-        <span class="mb-4 text-center">
-          {{ t("empty.teams") }}
-        </span>
         <HoppButtonSecondary
           :label="t('team.create_new')"
           filled
@@ -35,7 +28,7 @@
           :icon="IconPlus"
           @click="displayModalAdd(true)"
         />
-      </div>
+      </HoppSmartPlaceholder>
       <div v-else-if="!loading" class="flex flex-col">
         <div
           class="sticky top-0 z-10 flex items-center justify-between py-2 pl-2 mb-2 -top-2 bg-popover"