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

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

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

@@ -52,20 +52,19 @@
                 "
               />
             </HoppSmartLink>
-            <div
+            <HoppSmartPlaceholder
               v-if="
                 !(
                   filteredAppLanguages.length !== 0 ||
                   APP_LANGUAGES.length === 0
                 )
               "
-              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+              :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
             >
-              <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-              <span class="my-2 text-center">
-                {{ t("state.nothing_found") }} "{{ searchQuery }}"
-              </span>
-            </div>
+              <template #icon>
+                <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+              </template>
+            </HoppSmartPlaceholder>
           </div>
         </div>
       </template>