From acd529b2f7771feafa52fa978730b8389b02869b Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Thu, 1 Feb 2024 17:00:30 +0100
Subject: [PATCH] Modify visibility for search users

---
 src/components/Search/Search.module.scss |  6 ++++
 src/components/Search/Search.tsx         | 46 ++++++++++++------------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/Search/Search.module.scss b/src/components/Search/Search.module.scss
index 5d8dd27..0dd4f21 100644
--- a/src/components/Search/Search.module.scss
+++ b/src/components/Search/Search.module.scss
@@ -83,6 +83,12 @@
 .searchSuggestions {
   margin-top: 8px;
   width: 316px;
+  visibility: visible;
+
+  &.hidden {
+    visibility: hidden;
+    height: 0;
+  }
 }
 
 .loadingOverlay {
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 0bc69ca..1c6d72c 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -136,7 +136,7 @@ const Search: Component<{
         />
       </form>
 
-      <Show when={isFocused()}>
+      <div class={`${styles.searchSuggestions} ${!isFocused() ? styles.hidden : ''}`}>
         <Show
           when={!props.hideDefault}
         >
@@ -159,31 +159,31 @@ const Search: Component<{
             />
           </Show>
         </Show>
+      </div>
 
-        <div class={styles.searchSuggestions}>
-          <Show when={search?.isFetchingUsers && query().length > 0}>
-            <div class={styles.loadingOverlay}>
-              <div>
-                <Loader />
-              </div>
+      <div class={`${styles.searchSuggestions} ${!isFocused() ? styles.hidden : ''}`}>
+        <Show when={search?.isFetchingUsers && query().length > 0}>
+          <div class={styles.loadingOverlay}>
+            <div>
+              <Loader />
             </div>
-          </Show>
+          </div>
+        </Show>
 
-          <For each={search?.users}>
-            {(user) => (
-              <SearchOption
-                href={props.noLinks ? undefined : `/p/${user.npub}`}
-                title={userName(user)}
-                description={nip05Verification(user)}
-                icon={<Avatar user={user} size="vvs" />}
-                statNumber={profile?.profileHistory.stats[user.pubkey]?.followers_count || search?.scores[user.pubkey]}
-                statLabel={intl.formatMessage(t.followers)}
-                onClick={() => selectUser(user)}
-              />
-            )}
-          </For>
-        </div>
-      </Show>
+        <For each={search?.users}>
+          {(user) => (
+            <SearchOption
+              href={props.noLinks ? undefined : `/p/${user.npub}`}
+              title={userName(user)}
+              description={nip05Verification(user)}
+              icon={<Avatar user={user} size="vvs" />}
+              statNumber={profile?.profileHistory.stats[user.pubkey]?.followers_count || search?.scores[user.pubkey]}
+              statLabel={intl.formatMessage(t.followers)}
+              onClick={() => selectUser(user)}
+            />
+          )}
+        </For>
+      </div>
     </div>
   )
 }