feat: add h1 in EmptySearch component

vtex · Jan 30, 2025 · 4842990 · 4842990
1 parent 5372532
commit 4842990
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/packages/core/src/components/sections/ProductGallery/section.module.scss b/packages/core/src/components/sections/ProductGallery/section.module.scss
@@ -1,4 +1,5 @@
 @layer components {
+
   .section {
     @include media("<notebook") {
       margin-top: 0;
@@ -13,6 +14,25 @@
       }
     }
 
+    [data-fs-search-loading] {
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      h1 {
+        font-size: var(--fs-text-size-4);
+
+        @include media(">=tablet") { font-size: var(--fs-text-size-5); padding-top: var(--fs-spacing-4); }
+
+        span {
+          font-weight: var(--fs-text-weight-bold);
+        }
+      }
+    }
+
+
     @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
     @import "@faststore/ui/src/components/atoms/Button/styles.scss";
     @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";

diff --git a/packages/core/src/components/templates/SearchPage/SearchWrapper.tsx b/packages/core/src/components/templates/SearchPage/SearchWrapper.tsx
@@ -7,15 +7,29 @@ import Section from 'src/components/sections/Section'
 import type { SearchPageContextType } from 'src/pages/s'
 import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 import type { SearchContentType } from 'src/server/cms'
+import storeConfig from 'discovery.config'
 
 import SearchPage from './SearchPage'
 
-function EmptySearch() {
+type EmptySearchProps = {
+  title?: string
+}
+
+function EmptySearch({ title }: EmptySearchProps) {
   return (
     <Section
       className={`${ProductGalleryStyles.section} section-product-gallery`}
     >
-      <section data-testid="product-gallery" data-fs-product-listing>
+      <section
+        data-testid="product-gallery"
+        data-fs-product-listing
+        data-fs-search-loading
+      >
+        {title && (
+          <h1 data-fs-empty-search-title>
+            Resultados para: <strong>{title}</strong>
+          </h1>
+        )}
         <EmptyState title="" showLoader />
       </section>
     </Section>
@@ -52,7 +66,15 @@ export default function SearchWrapper({
   )
 
   if (isValidating || !pageProductGalleryData) {
-    return <EmptySearch />
+    return (
+      <EmptySearch
+        title={
+          storeConfig.experimental.enableSearchSSR
+            ? serverData.searchTerm
+            : undefined
+        }
+      />
+    )
   }
 
   // Redirect when there are registered Intelligent Search redirects on VTEX Admin
@@ -61,7 +83,15 @@ export default function SearchWrapper({
       shallow: true,
     })
 
-    return <EmptySearch />
+    return (
+      <EmptySearch
+        title={
+          storeConfig.experimental.enableSearchSSR
+            ? serverData.searchTerm
+            : undefined
+        }
+      />
+    )
   }
 
   const productGalleryProducts = pageProductGalleryData?.search?.products