Show No results instead of all cards when search failed

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_shop.scss

@@ -186,6 +186,13 @@ button {
     .catalog-container {
         padding-bottom: 4rem;
 
+        .no-results {
+            color: rgba(255, 255, 255, 0.58);
+            display: inline-block;
+            padding: 0rem 1.5rem;
+            font-size: 1rem;
+        }
+
         .catalog-bar {
             display: flex;
             width: 100%;

static/js/shop/Catalog.jsx

@@ -20,7 +20,8 @@ export function Catalog() {
 
     const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
     const isMobile = useShopStore((state) => state.isMobile);
-    const showSearch = useShopStore((state) => state.listed_cards.length > 0);
+    const showSearch = useShopStore((state) => state.listed_cards.length > 0 && state.search_bar_value.length > 0);
+    const noResults = useShopStore((state) => state.listed_cards.length === 0 && state.search_bar_value.length > 0);
 
     // #!render_count
     console.log("Catalog renders: ", renderCount)
@@ -36,8 +37,6 @@ export function Catalog() {
                     ref={provided.innerRef}
                     {...provided.droppableProps}>
 
-
-
                     <div className="catalog-bar">
                         <SearchBar/>
 
@@ -50,7 +49,9 @@ export function Catalog() {
                         ) : null}
                     </div>
 
-                    {showSearch ? <CatalogSearchResult/> : <CatalogGroups/>}
+                    {(showSearch && <CatalogSearchResult/>) ||
+                        (noResults && <p className="no-results">No results</p>) ||
+                        <CatalogGroups/>}
 
                     {provided.placeholder && (
                         <div style={{display: 'none'}}>