refactor: remove unnecessary check for slot contents

packages/hoppscotch-common/src/components/app/Shortcuts.vue

@@ -17,9 +17,10 @@
           v-if="isEmpty(shortcutsResults)"
           :text="`${t('state.nothing_found')} ‟${filterText}”`"
         >
-          <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+          <template #icon>
+            <icon-lucide-search class="svg-icons opacity-75" />
+          </template>
         </HoppSmartPlaceholder>
-
         <details
           v-for="(sectionResults, sectionTitle) in shortcutsResults"
           v-else

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -49,13 +49,15 @@
           :text="`${t('state.nothing_found')} ‟${search}”`"
         >
           <template #icon>
-            <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+            <icon-lucide-search class="svg-icons opacity-75" />
           </template>
+          <template #body>
             <HoppButtonSecondary
               :label="t('action.clear')"
               outline
               @click="search = ''"
             />
+          </template>
         </HoppSmartPlaceholder>
       </div>
       <div

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -254,7 +254,7 @@
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
-              <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+              <icon-lucide-search class="svg-icons opacity-75" />
             </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
@@ -263,6 +263,7 @@
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
           >
+            <template #body>
               <div class="flex flex-col items-center space-y-4">
                 <span class="text-center text-secondaryLight">
                   {{ t("collection.import_or_create") }}
@@ -284,6 +285,7 @@
                   />
                 </div>
               </div>
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
@@ -291,6 +293,7 @@
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
           >
+            <template #body>
               <HoppButtonSecondary
                 :label="t('add.new')"
                 filled
@@ -303,6 +306,7 @@
                     })
                 "
               />
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -274,6 +274,7 @@
             :text="t('empty.collections')"
             @drop.stop
           >
+            <template #body>
               <div class="flex flex-col items-center space-y-4">
                 <span class="text-center text-secondaryLight">
                   {{ t("collection.import_or_create") }}
@@ -287,7 +288,9 @@
                     :disabled="hasNoTeamAccess"
                     :title="hasNoTeamAccess ? t('team.no_access') : ''"
                     @click="
-                    hasNoTeamAccess ? null : emit('display-modal-import-export')
+                      hasNoTeamAccess
+                        ? null
+                        : emit('display-modal-import-export')
                     "
                   />
                   <HoppButtonSecondary
@@ -301,6 +304,7 @@
                   />
                 </div>
               </div>
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
@@ -309,6 +313,7 @@
             :text="t('empty.collections')"
             @drop.stop
           >
+            <template #body>
               <HoppButtonSecondary
                 :label="t('add.new')"
                 filled
@@ -321,6 +326,7 @@
                     })
                 "
               />
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"

packages/hoppscotch-common/src/components/collections/graphql/Collection.vue

@@ -180,6 +180,7 @@
           :alt="`${t('empty.collection')}`"
           :text="t('empty.collection')"
         >
+          <template #body>
             <HoppButtonSecondary
               :label="t('add.new')"
               filled
@@ -190,6 +191,7 @@
                 })
               "
             />
+          </template>
         </HoppSmartPlaceholder>
       </div>
     </div>

packages/hoppscotch-common/src/components/collections/graphql/Folder.vue

@@ -176,8 +176,7 @@
           :src="`/images/states/${colorMode.value}/pack.svg`"
           :alt="`${t('empty.folder')}`"
           :text="t('empty.folder')"
-        >
+        />
-        </HoppSmartPlaceholder>
       </div>
     </div>
     <HoppSmartConfirmModal

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -11,7 +11,7 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="!border-0 bg-transparent py-2 pl-4 pr-2"
+        class="flex w-full bg-transparent px-4 py-2 h-8"
       />
       <div
         class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
@@ -66,6 +66,7 @@
       :alt="`${t('empty.collections')}`"
       :text="t('empty.collections')"
     >
+      <template #body>
         <div class="flex flex-col items-center space-y-4">
           <span class="text-center text-secondaryLight">
             {{ t("collection.import_or_create") }}
@@ -87,13 +88,14 @@
             />
           </div>
         </div>
+      </template>
     </HoppSmartPlaceholder>
     <HoppSmartPlaceholder
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
       :text="`${t('state.nothing_found')} ‟${filterText}”`"
     >
       <template #icon>
-        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+        <icon-lucide-search class="svg-icons opacity-75" />
       </template>
     </HoppSmartPlaceholder>
     <CollectionsGraphqlAdd

packages/hoppscotch-common/src/components/collections/index.vue

@@ -22,7 +22,7 @@
         v-model="filterTexts"
         type="search"
         autocomplete="off"
-        class="flex w-full bg-transparent px-4 py-2"
+        class="flex w-full bg-transparent px-4 py-2 h-8"
         :placeholder="t('action.search')"
         :disabled="collectionsType.type === 'team-collections'"
       />

packages/hoppscotch-common/src/components/cookies/AllModal.vue

@@ -11,7 +11,9 @@
         v-if="!currentInterceptorSupportsCookies"
         :text="t('cookies.modal.interceptor_no_support')"
       >
+        <template #body>
           <AppInterceptor class="rounded border border-dividerLight p-2" />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else class="flex flex-col">
         <div
@@ -38,8 +40,7 @@
             :alt="`${t('cookies.modal.empty_domains')}`"
             :text="t('cookies.modal.empty_domains')"
             class="mt-6"
-          >
+          />
-          </HoppSmartPlaceholder>
           <div
             v-for="[domain, entries] in workingCookieJar.entries()"
             v-else

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

@@ -93,20 +93,12 @@
                   }
                 "
               />
-              <div
+              <HoppSmartPlaceholder
                 v-if="myEnvironments.length === 0"
-                class="flex flex-col items-center justify-center text-secondaryLight"
-              >
-                <img
                 :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                  loading="lazy"
-                  class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
                 :alt="`${t('empty.environments')}`"
+                :text="t('empty.environments')"
               />
-                <span class="pb-2 text-center">
-                  {{ t("empty.environments") }}
-                </span>
-              </div>
             </HoppSmartTab>
             <HoppSmartTab
               :id="'team-environments'"
@@ -140,20 +132,12 @@
                     }
                   "
                 />
-                <div
+                <HoppSmartPlaceholder
                   v-if="teamEnvironmentList.length === 0"
-                  class="flex flex-col items-center justify-center text-secondaryLight"
-                >
-                  <img
                   :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                    loading="lazy"
-                    class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
                   :alt="`${t('empty.environments')}`"
+                  :text="t('empty.environments')"
                 />
-                  <span class="pb-2 text-center">
-                    {{ t("empty.environments") }}
-                  </span>
-                </div>
               </div>
               <div
                 v-if="!teamListLoading && teamAdapterError"

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -78,11 +78,13 @@
             :alt="`${t('empty.environments')}`"
             :text="t('empty.environments')"
           >
+            <template #body>
               <HoppButtonSecondary
                 :label="`${t('add.new')}`"
                 filled
                 @click="addEnvironmentVariable"
               />
+            </template>
           </HoppSmartPlaceholder>
         </div>
       </div>

packages/hoppscotch-common/src/components/environments/my/index.vue

@@ -38,6 +38,7 @@
       :alt="`${t('empty.environments')}`"
       :text="t('empty.environments')"
     >
+      <template #body>
         <div class="flex flex-col items-center space-y-4">
           <span class="text-center text-secondaryLight">
             {{ t("environment.import_or_create") }}
@@ -59,6 +60,7 @@
             />
           </div>
         </div>
+      </template>
     </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showModalDetails"

packages/hoppscotch-common/src/components/environments/teams/Details.vue

@@ -81,6 +81,7 @@
             :alt="`${t('empty.environments')}`"
             :text="t('empty.environments')"
           >
+            <template #body>
               <HoppButtonSecondary
                 v-if="isViewer"
                 disabled
@@ -93,6 +94,7 @@
                 filled
                 @click="addEnvironmentVariable"
               />
+            </template>
           </HoppSmartPlaceholder>
         </div>
       </div>

packages/hoppscotch-common/src/components/environments/teams/index.vue

@@ -49,6 +49,7 @@
       :alt="`${t('empty.environments')}`"
       :text="t('empty.environments')"
     >
+      <template #body>
         <div class="flex flex-col items-center space-y-4">
           <span class="text-center text-secondaryLight">
             {{ t("environment.import_or_create") }}
@@ -74,6 +75,7 @@
             />
           </div>
         </div>
+      </template>
     </HoppSmartPlaceholder>
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment

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

@@ -120,6 +120,7 @@
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
     >
+      <template #body>
         <HoppButtonSecondary
           outline
           :label="t('app.documentation')"
@@ -128,6 +129,7 @@
           :icon="IconExternalLink"
           reverse
         />
+      </template>
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">

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

@@ -162,12 +162,14 @@
       :alt="`${t('empty.headers')}`"
       :text="t('empty.headers')"
     >
+      <template #body>
         <HoppButtonSecondary
           :label="`${t('add.new')}`"
           filled
           :icon="IconPlus"
           @click="addHeader"
         />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>

packages/hoppscotch-common/src/components/graphql/Sidebar.vue

@@ -20,8 +20,7 @@
         :src="`/images/states/${colorMode.value}/add_comment.svg`"
         :alt="`${t('empty.documentation')}`"
         :text="t('empty.documentation')"
-      >
+      />
-      </HoppSmartPlaceholder>
       <div v-else>
         <div
           class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto bg-primary"
@@ -30,7 +29,7 @@
             v-model="graphqlFieldsFilterText"
             type="search"
             autocomplete="off"
-            class="flex w-full bg-transparent px-4 py-2"
+            class="flex w-full bg-transparent px-4 py-2 h-8"
             :placeholder="`${t('action.search')}`"
           />
           <div class="flex">

packages/hoppscotch-common/src/components/history/index.vue

@@ -9,7 +9,7 @@
           v-model="filterText"
           type="search"
           autocomplete="off"
-          class="flex w-full bg-transparent px-4 py-2"
+          class="flex w-full bg-transparent px-4 py-2 h-8"
           :placeholder="`${t('action.search')}`"
         />
         <div class="flex">
@@ -114,8 +114,7 @@
       :src="`/images/states/${colorMode.value}/history.svg`"
       :alt="`${t('empty.history')}`"
       :text="t('empty.history')"
-    >
+    />
-    </HoppSmartPlaceholder>
     <HoppSmartPlaceholder
       v-else-if="
         Object.keys(filteredHistoryGroups).length === 0 ||
@@ -124,8 +123,9 @@
       :text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
     >
       <template #icon>
-        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+        <icon-lucide-search class="svg-icons opacity-75" />
       </template>
+      <template #body>
         <HoppButtonSecondary
           :label="t('action.clear')"
           outline
@@ -136,6 +136,7 @@
             }
           "
         />
+      </template>
     </HoppSmartPlaceholder>
     <HoppSmartConfirmModal
       :show="confirmRemove"

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

@@ -119,6 +119,7 @@
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
     >
+      <template #body>
         <HoppButtonSecondary
           outline
           :label="t('app.documentation')"
@@ -127,6 +128,7 @@
           :icon="IconExternalLink"
           reverse
         />
+      </template>
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">

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

@@ -112,6 +112,7 @@
       :alt="`${t('empty.body')}`"
       :text="t('empty.body')"
     >
+      <template #body>
         <HoppButtonSecondary
           outline
           :label="`${t('app.documentation')}`"
@@ -120,6 +121,7 @@
           :icon="IconExternalLink"
           reverse
         />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>

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

@@ -158,12 +158,14 @@
       :alt="`${t('empty.body')}`"
       :text="t('empty.body')"
     >
+      <template #body>
         <HoppButtonSecondary
           :label="`${t('add.new')}`"
           filled
           :icon="IconPlus"
           @click="addBodyParam"
         />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>

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

@@ -61,7 +61,7 @@
                   :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
                 >
                   <template #icon>
-                    <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+                    <icon-lucide-search class="svg-icons opacity-75" />
                   </template>
                 </HoppSmartPlaceholder>
               </div>

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

@@ -209,12 +209,14 @@
         :alt="`${t('empty.headers')}`"
         :text="t('empty.headers')"
       >
+        <template #body>
           <HoppButtonSecondary
             filled
             :label="`${t('add.new')}`"
             :icon="IconPlus"
             @click="addHeader"
           />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>

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

@@ -157,12 +157,14 @@
         :alt="`${t('empty.parameters')}`"
         :text="t('empty.parameters')"
       >
+        <template #body>
           <HoppButtonSecondary
             :label="`${t('add.new')}`"
             :icon="IconPlus"
             filled
             @click="addParam"
           />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>

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

@@ -37,7 +37,9 @@
         :text="t('helpers.network_fail')"
         large
       >
+        <template #body>
           <AppInterceptor class="rounded border border-dividerLight p-2" />
+        </template>
       </HoppSmartPlaceholder>
       <HoppSmartPlaceholder
         v-if="response.type === 'script_fail'"
@@ -47,12 +49,14 @@
         :text="t('helpers.script_fail')"
         large
       >
+        <template #body>
           <div
             class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
           >
             {{ response.error.name }}: {{ response.error.message }}<br />
             {{ response.error.stack }}
           </div>
+        </template>
       </HoppSmartPlaceholder>
       <div
         v-if="response.type === 'success' || response.type === 'fail'"

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

@@ -159,8 +159,7 @@
       :alt="`${t('error.test_script_fail')}`"
       :heading="t('error.test_script_fail')"
       :text="t('helpers.test_script_fail')"
-    >
+    />
-    </HoppSmartPlaceholder>
     <HoppSmartPlaceholder
       v-else
       :src="`/images/states/${colorMode.value}/validation.svg`"
@@ -168,6 +167,7 @@
       :heading="t('empty.tests')"
       :text="t('helpers.tests')"
     >
+      <template #body>
         <HoppButtonSecondary
           outline
           :label="`${t('action.learn_more')}`"
@@ -175,8 +175,8 @@
           blank
           :icon="IconExternalLink"
           reverse
-        class="my-4"
         />
+      </template>
     </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showMyEnvironmentDetailsModal"

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

@@ -149,12 +149,14 @@
         :alt="`${t('empty.body')}`"
         :text="t('empty.body')"
       >
+        <template #body>
           <HoppButtonSecondary
             filled
             :label="`${t('add.new')}`"
             :icon="IconPlus"
             @click="addUrlEncodedParam"
           />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>

packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue

@@ -5,6 +5,7 @@
     :heading="t('error.network_fail')"
     large
   >
+    <template #body>
       <div class="my-1 flex flex-col items-center text-secondaryLight">
         <span>
           {{ t("error.please_install_extension") }}
@@ -54,6 +55,7 @@
           </HoppSmartToggle>
         </div>
       </div>
+    </template>
   </HoppSmartPlaceholder>
 </template>
 

packages/hoppscotch-common/src/components/share/index.vue

@@ -32,10 +32,12 @@
         :alt="`${t('empty.shared_requests_logout')}`"
         :text="`${t('empty.shared_requests_logout')}`"
       >
+        <template #body>
           <HoppButtonPrimary
             :label="t('auth.login')"
             @click="invokeAction('modals.login.toggle')"
           />
+        </template>
       </HoppSmartPlaceholder>
 
       <template v-else-if="sharedRequests.length">

packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue

@@ -60,7 +60,7 @@
               :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
             >
               <template #icon>
-                <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+                <icon-lucide-search class="svg-icons opacity-75" />
               </template>
             </HoppSmartPlaceholder>
           </div>

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

@@ -45,6 +45,7 @@
             :alt="`${t('empty.members')}`"
             :text="t('empty.members')"
           >
+            <template #body>
               <HoppButtonSecondary
                 :icon="IconUserPlus"
                 :label="t('team.invite')"
@@ -54,6 +55,7 @@
                   }
                 "
               />
+            </template>
           </HoppSmartPlaceholder>
           <div v-else class="divide-y divide-dividerLight">
             <div

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

@@ -125,8 +125,7 @@
                 pendingInvites.data.right.team?.teamInvitations.length === 0
               "
               :text="t('empty.pending_invites')"
-            >
+            />
-            </HoppSmartPlaceholder>
             <div
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
@@ -245,11 +244,13 @@
             :alt="`${t('empty.invites')}`"
             :text="`${t('empty.invites')}`"
           >
+            <template #body>
               <HoppButtonSecondary
                 :label="t('add.new')"
                 filled
                 @click="addNewInvitee"
               />
+            </template>
           </HoppSmartPlaceholder>
         </div>
         <div

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

@@ -16,11 +16,13 @@
         :alt="`${t('empty.teams')}`"
         :text="`${t('empty.teams')}`"
       >
+        <template #body>
           <HoppButtonSecondary
             :label="`${t('team.create_new')}`"
             filled
             @click="displayModalAdd(true)"
           />
+        </template>
       </HoppSmartPlaceholder>
       <div
         v-else-if="!loading"

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

@@ -21,6 +21,7 @@
         :alt="`${t('empty.teams')}`"
         :text="`${t('empty.teams')}`"
       >
+        <template #body>
           <HoppButtonSecondary
             :label="t('team.create_new')"
             filled
@@ -28,6 +29,7 @@
             :icon="IconPlus"
             @click="displayModalAdd(true)"
           />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else-if="!loading" class="flex flex-col">
         <div

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

@@ -14,10 +14,12 @@
           :alt="`${t('empty.profile')}`"
           :text="`${t('empty.profile')}`"
         >
+          <template #body>
             <HoppButtonPrimary
               :label="t('auth.login')"
               @click="invokeAction('modals.login.toggle')"
             />
+          </template>
         </HoppSmartPlaceholder>
         <div v-else class="space-y-8">
           <div

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

@@ -142,12 +142,14 @@
         :alt="`${t('empty.subscription')}`"
         :text="`${t('empty.subscription')}`"
       >
+        <template #body>
           <HoppButtonSecondary
             :label="t('mqtt.new')"
             filled
             outline
             @click="showSubscriptionModal(true)"
           />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else>
         <div

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

@@ -197,6 +197,7 @@
             :alt="`${t('socketio.connection_not_authorized')}`"
             :text="`${t('socketio.connection_not_authorized')}`"
           >
+            <template #body>
               <HoppButtonSecondary
                 outline
                 :label="t('app.documentation')"
@@ -205,6 +206,7 @@
                 :icon="IconExternalLink"
                 reverse
               />
+            </template>
           </HoppSmartPlaceholder>
           <div
             v-if="authType === 'Bearer'"

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

@@ -163,8 +163,7 @@
             :src="`/images/states/${colorMode.value}/add_category.svg`"
             :alt="`${t('empty.protocols')}`"
             :text="`${t('empty.protocols')}`"
-          >
+          />
-          </HoppSmartPlaceholder>
         </HoppSmartTab>
       </HoppSmartTabs>
     </template>

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

@@ -117,7 +117,13 @@
             alt="No invites"
             text="No invites"
           >
-            <HoppButtonSecondary label="Add new" filled @click="addNewMember" />
+            <template #body>
+              <HoppButtonSecondary
+                label="Add new"
+                filled
+                @click="addNewMember"
+              />
+            </template>
           </HoppSmartPlaceholder>
         </div>
         <div

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

@@ -15,6 +15,7 @@
           v-if="team?.teamMembers?.length === 0"
           text="No members in this team. Add members to this team to collaborate"
         >
+          <template #body>
             <HoppButtonSecondary
               :icon="IconUserPlus"
               :label="t('teams.add_members')"
@@ -24,6 +25,7 @@
                 }
               "
             />
+          </template>
         </HoppSmartPlaceholder>
         <div v-else class="divide-y divide-dividerLight">
           <div

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

@@ -41,10 +41,12 @@
         v-if="team && pendingInvites?.length === 0"
         text="No pending invites"
       >
+        <template #body>
           <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.
+            {{ t('error.something_went_wrong') }}
           </div>
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>

packages/hoppscotch-ui/src/components/smart/Placeholder.vue

@@ -4,24 +4,29 @@
       v-if="src"
       :src="src"
       loading="lazy"
-      class="inline-flex flex-col object-contain object-center mb-4"
+      class="inline-flex flex-col object-contain object-center"
       :class="large ? 'w-32 h-32' : 'w-16 h-16'"
       :alt="alt"
     />
     <slot name="icon"></slot>
-    <span v-if="heading" class="mb-2 font-semibold text-center">
+    <span v-if="heading" class="font-semibold mt-2 text-center">
       {{ heading }}
     </span>
     <span
-      class="max-w-sm mb-4 text-center whitespace-normal text-secondaryLight"
+      v-if="text"
+      class="max-w-sm mt-2 text-center whitespace-normal text-secondaryLight text-tiny"
     >
       {{ text }}
     </span>
-    <slot></slot>
+    <div v-if="hasBody" class="mt-4">
+      <slot name="body"></slot>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
+
 withDefaults(
   defineProps<{
     src?: string
@@ -35,4 +40,10 @@ withDefaults(
     text: "",
   }
 )
+
+const slots = useSlots()
+
+const hasBody = computed(() => {
+  return !!slots.body
+})
 </script>