From 0a58f98a90cc0e52b748aaa5cbd85ff21f7d49a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Wed, 29 Nov 2023 12:04:13 +0100
Subject: [PATCH 1/9] Update MarketSearch.tsx

---
 components/markets/MarketSearch.tsx | 139 +++++++++++++++-------------
 1 file changed, 77 insertions(+), 62 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index f1f6acc96..0d4b4789a 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -1,7 +1,9 @@
+import { Transition } from "@headlessui/react";
 import { MarketStatus } from "@zeitgeistpm/indexer";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { FaDeleteLeft } from "react-icons/fa6";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Search, X } from "react-feather";
 
 const MarketSearch = () => {
@@ -12,6 +14,7 @@ const MarketSearch = () => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { data: markets } = useMarketSearch(searchTerm);
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
@@ -30,77 +33,89 @@ const MarketSearch = () => {
         <Search className="mr-4 text-ztg-blue" />
       </Link>
       <div className="hidden items-center lg:flex">
+        <input
+          ref={inputRef}
+          className={`h-10 transition-all ${
+            showSearch ? "max-w-[500px] px-3" : "max-w-[0px]"
+          } w-full  rounded-lg bg-sky-900  text-white focus:outline-none`}
+          value={searchTerm}
+          placeholder="Search markets"
+          onChange={(event) => {
+            setShowResults(true);
+            setSearchTerm(event.target.value);
+          }}
+          onFocus={() => {
+            setShowResults(true);
+          }}
+        />
+        {showSearch && (
+          <button
+            className="relative right-6 text-sky-600"
+            onClick={() => {
+              setSearchTerm("");
+            }}
+          >
+            <FaDeleteLeft size={16} />
+          </button>
+        )}
+
         <button
-          onClick={() => {
-            setShowSearch(true);
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowSearch(!showSearch);
             setTimeout(() => {
-              inputRef.current?.focus();
+              if (showSearch) {
+                inputRef.current?.focus();
+              }
             });
           }}
         >
           <Search className="mr-4 text-ztg-blue" />
         </button>
-        {showSearch && (
-          <>
-            <input
-              ref={inputRef}
-              className="h-8 w-full max-w-[500px] rounded-sm bg-sky-900 px-2 text-white focus:outline-none "
-              value={searchTerm}
-              placeholder="Search markets"
-              onChange={(event) => {
-                setShowResults(true);
-                setSearchTerm(event.target.value);
-              }}
-              onFocus={() => {
-                setShowResults(true);
-              }}
-            />
-            <button
-              className="relative right-6 text-sky-600"
-              onClick={() => {
-                setSearchTerm("");
-                inputRef.current?.focus();
-              }}
-            >
-              <X size={16} />
-            </button>
-          </>
-        )}
       </div>
-      {showResults && markets && (
-        <div className="absolute top-[45px] hidden max-h-[300px] w-[500px] translate-x-[40px]  flex-col overflow-scroll rounded-md bg-white py-2 shadow-2xl lg:flex">
-          <div className="mx-4 text-sky-600">Results</div>
-
-          {markets.length > 0 ? (
-            markets?.map((market) => (
-              <Link
-                href={`/markets/${market.marketId}`}
-                className="flex justify-between overflow-ellipsis px-4 py-2 hover:bg-sky-100"
-                onClick={() => {
-                  setShowResults(false);
-                }}
-              >
-                <div className="line-clamp-1 w-85% overflow-ellipsis">
-                  {market.question}
-                </div>
-                <div
-                  className={`w-16 rounded-md px-2 py-1 text-center text-xs text-white ${
-                    market.status === MarketStatus.Active
-                      ? "bg-sheen-green"
-                      : "bg-vermilion"
-                  }`}
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 :scale-95"
+        show={Boolean(showResults && showSearch && markets)}
+      >
+        <div className=" absolute top-[45px] hidden max-h-[420px] w-[500px] flex-col rounded-md bg-white px-2 py-4 shadow-2xl lg:flex">
+          <div className="subtle-scroll-bar overflow-y-scroll">
+            {markets?.length ? (
+              markets?.map((market) => (
+                <Link
+                  href={`/markets/${market.marketId}`}
+                  className="flex justify-between overflow-ellipsis rounded-md px-4 py-2 hover:bg-sky-100"
+                  onClick={() => {
+                    setShowResults(false);
+                  }}
                 >
-                  {market.status === MarketStatus.Active
-                    ? "Active"
-                    : "Inactive"}
-                </div>
-              </Link>
-            ))
-          ) : (
-            <div className="w-full pb-4 pt-6 text-center">No results</div>
-          )}
+                  <div className="line-clamp-1 w-85% overflow-ellipsis">
+                    {market.question}
+                  </div>
+                  <div
+                    className={`w-16 rounded-md px-2 py-1 text-center text-xs text-white ${
+                      market.status === MarketStatus.Active
+                        ? "bg-green-400"
+                        : "bg-gray-400"
+                    }`}
+                  >
+                    {market.status === MarketStatus.Active
+                      ? "Active"
+                      : "Inactive"}
+                  </div>
+                </Link>
+              ))
+            ) : (
+              <div className="w-full pb-4 pt-6 text-center">No results</div>
+            )}
+          </div>
         </div>
-      )}
+      </Transition>
     </div>
   );
 };

From ef75937af676301de5df184b4343fe808e9db678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Wed, 29 Nov 2023 12:05:56 +0100
Subject: [PATCH 2/9] set focus when opening search

---
 components/markets/MarketSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 0d4b4789a..f9ec291e8 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -64,7 +64,7 @@ const MarketSearch = () => {
             e.stopPropagation();
             setShowSearch(!showSearch);
             setTimeout(() => {
-              if (showSearch) {
+              if (!showSearch) {
                 inputRef.current?.focus();
               }
             });

From d8c001ba7c4460ce0c261f9bf3e81b376a9be47b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Wed, 29 Nov 2023 12:17:41 +0100
Subject: [PATCH 3/9] remove outline flash on focus and retain focus when
 clearing

---
 components/markets/MarketSearch.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index f9ec291e8..97381cedb 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -37,7 +37,7 @@ const MarketSearch = () => {
           ref={inputRef}
           className={`h-10 transition-all ${
             showSearch ? "max-w-[500px] px-3" : "max-w-[0px]"
-          } w-full  rounded-lg bg-sky-900  text-white focus:outline-none`}
+          } w-full  rounded-lg bg-sky-900  text-white outline-none`}
           value={searchTerm}
           placeholder="Search markets"
           onChange={(event) => {
@@ -53,6 +53,7 @@ const MarketSearch = () => {
             className="relative right-6 text-sky-600"
             onClick={() => {
               setSearchTerm("");
+              inputRef.current?.focus();
             }}
           >
             <FaDeleteLeft size={16} />

From 517f538c577f1be16db451595291d9f787d9b718 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Wed, 29 Nov 2023 12:44:56 +0100
Subject: [PATCH 4/9] mobile market search

---
 components/markets/MarketSearch.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 97381cedb..b08d80f89 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -45,7 +45,9 @@ const MarketSearch = () => {
             setSearchTerm(event.target.value);
           }}
           onFocus={() => {
-            setShowResults(true);
+            if (searchTerm?.length > 0) {
+              setShowResults(true);
+            }
           }}
         />
         {showSearch && (
@@ -53,7 +55,12 @@ const MarketSearch = () => {
             className="relative right-6 text-sky-600"
             onClick={() => {
               setSearchTerm("");
-              inputRef.current?.focus();
+              if (showResults) {
+                setShowResults(false);
+              }
+              setTimeout(() => {
+                inputRef.current?.focus();
+              }, 66);
             }}
           >
             <FaDeleteLeft size={16} />

From 885db18669f85c0c60b38c40bc9b4564b33cb48f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Wed, 29 Nov 2023 12:45:08 +0100
Subject: [PATCH 5/9] Handle focus states and clearing better

---
 pages/search.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index b5ac81916..0eeed287d 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -2,26 +2,33 @@ import { MarketStatus } from "@zeitgeistpm/indexer";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import { NextPage } from "next";
 import Link from "next/link";
-import { useState } from "react";
+import { use, useEffect, useRef, useState } from "react";
 import { X } from "react-feather";
 
 const SearchPage: NextPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
 
   const { data: markets } = useMarketSearch(searchTerm);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef?.current?.focus();
+  }, [inputRef]);
+
   return (
-    <div className="mt-4">
-      <div className="flex items-center px-2">
+    <div className="relative mt-2">
+      <div className="fixed left-0 right-0 top-16 mt-1 flex items-center">
         <input
-          className="h-8 w-full max-w-[500px] rounded-md border border-sky-200 px-2 focus:outline-none"
+          className="h-12 w-full flex-1 border bg-gray-200 px-5 focus:outline-none"
           value={searchTerm}
+          ref={inputRef}
           placeholder="Search markets"
           onChange={(event) => {
             setSearchTerm(event.target.value);
           }}
         />
         <button
-          className="relative right-6 text-sky-600"
+          className="absolute right-6 text-sky-600"
           onClick={() => {
             setSearchTerm("");
           }}
@@ -30,9 +37,7 @@ const SearchPage: NextPage = () => {
         </button>
       </div>
       {markets && (
-        <div className="flex flex-col py-4">
-          <div className="px-2 text-sky-600">Results</div>
-
+        <div className="flex flex-col py-4 pt-12">
           {markets.length > 0 ? (
             markets?.map((market) => (
               <Link
@@ -45,8 +50,8 @@ const SearchPage: NextPage = () => {
                 <div
                   className={`ml-auto w-16 rounded-md px-2 py-1 text-center text-xs text-white ${
                     market.status === MarketStatus.Active
-                      ? "bg-sheen-green"
-                      : "bg-vermilion"
+                      ? "bg-green-400"
+                      : "bg-gray-400"
                   }`}
                 >
                   {market.status === MarketStatus.Active

From 14459ca7bada388bc90f99266519b22a08b9f831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Wed, 29 Nov 2023 13:28:38 +0100
Subject: [PATCH 6/9] Update search.tsx

---
 pages/search.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index 0eeed287d..c38f494e1 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -12,7 +12,9 @@ const SearchPage: NextPage = () => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    inputRef?.current?.focus();
+    setTimeout(() => {
+      inputRef?.current?.focus();
+    }, 66);
   }, [inputRef]);
 
   return (

From f712820c7ab55db8f35ba66535277a04ddf2a034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Thu, 30 Nov 2023 12:31:46 +0100
Subject: [PATCH 7/9] indication of typing

---
 components/markets/MarketSearch.tsx |  74 ++++++++++--------
 components/ui/TypingIndicator.tsx   | 116 ++++++++++++++++++++++++++++
 2 files changed, 159 insertions(+), 31 deletions(-)
 create mode 100644 components/ui/TypingIndicator.tsx

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index b08d80f89..7e468cfec 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -3,8 +3,11 @@ import { MarketStatus } from "@zeitgeistpm/indexer";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import Link from "next/link";
 import { FaDeleteLeft } from "react-icons/fa6";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, RefObject, use, useEffect, useRef, useState } from "react";
 import { Search, X } from "react-feather";
+import { AnimatePresence, Variants, motion, useAnimate } from "framer-motion";
+import { TAILWIND } from "lib/constants";
+import { TypingIndicator } from "components/ui/TypingIndicator";
 
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -13,7 +16,7 @@ const MarketSearch = () => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { data: markets } = useMarketSearch(searchTerm);
+  const { data: markets, isFetching } = useMarketSearch(searchTerm);
 
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -33,39 +36,48 @@ const MarketSearch = () => {
         <Search className="mr-4 text-ztg-blue" />
       </Link>
       <div className="hidden items-center lg:flex">
-        <input
-          ref={inputRef}
-          className={`h-10 transition-all ${
+        <div
+          className={`relative w-full overflow-hidden transition-all ${
             showSearch ? "max-w-[500px] px-3" : "max-w-[0px]"
-          } w-full  rounded-lg bg-sky-900  text-white outline-none`}
-          value={searchTerm}
-          placeholder="Search markets"
-          onChange={(event) => {
-            setShowResults(true);
-            setSearchTerm(event.target.value);
-          }}
-          onFocus={() => {
-            if (searchTerm?.length > 0) {
+          }`}
+        >
+          <input
+            ref={inputRef}
+            className={`h-10 w-full rounded-lg bg-sky-900  px-3 text-white  outline-none transition-all`}
+            value={searchTerm}
+            placeholder="Search markets"
+            onChange={(event) => {
               setShowResults(true);
-            }
-          }}
-        />
-        {showSearch && (
-          <button
-            className="relative right-6 text-sky-600"
-            onClick={() => {
-              setSearchTerm("");
-              if (showResults) {
-                setShowResults(false);
+              setSearchTerm(event.target.value);
+            }}
+            onFocus={() => {
+              if (searchTerm?.length > 0) {
+                setShowResults(true);
               }
-              setTimeout(() => {
-                inputRef.current?.focus();
-              }, 66);
             }}
-          >
-            <FaDeleteLeft size={16} />
-          </button>
-        )}
+          />
+
+          <div className="absolute right-12 top-[50%] translate-y-[-50%]">
+            <TypingIndicator inputRef={inputRef} isFetching={isFetching} />
+          </div>
+
+          {showSearch && (
+            <button
+              className="absolute right-6 top-[50%] translate-y-[-50%] text-sky-600"
+              onClick={() => {
+                setSearchTerm("");
+                if (showResults) {
+                  setShowResults(false);
+                }
+                setTimeout(() => {
+                  inputRef.current?.focus();
+                }, 66);
+              }}
+            >
+              <FaDeleteLeft size={16} />
+            </button>
+          )}
+        </div>
 
         <button
           onClick={(e) => {
diff --git a/components/ui/TypingIndicator.tsx b/components/ui/TypingIndicator.tsx
new file mode 100644
index 000000000..63807ce5f
--- /dev/null
+++ b/components/ui/TypingIndicator.tsx
@@ -0,0 +1,116 @@
+import { motion, useAnimate } from "framer-motion";
+import { TAILWIND } from "lib/constants";
+import { RefObject, useEffect, useRef, useState } from "react";
+
+export const TypingIndicator = ({
+  inputRef,
+  isFetching,
+}: {
+  inputRef: RefObject<HTMLInputElement>;
+  isFetching: boolean;
+}) => {
+  const [index, setIndex] = useState(0);
+  const [isTyping, setIsTyping] = useState(false);
+  const [scope, animate] = useAnimate();
+
+  const typingTimer = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const listener = () => {
+      setIndex((prev) => {
+        if (prev + 1 >= 3) {
+          return 0;
+        }
+        return prev + 1;
+      });
+      setIsTyping(() => true);
+      clearTimeout(typingTimer.current);
+      typingTimer.current = setTimeout(() => {
+        setIsTyping(() => false);
+      }, 1000);
+    };
+    inputRef.current?.addEventListener("keydown", listener);
+    return () => {
+      inputRef.current?.removeEventListener("keydown", listener);
+    };
+  }, [inputRef]);
+
+  const typingAnimation = async () => {
+    animate(
+      "div",
+      { transform: "translateY(0%)", opacity: 0.2 },
+      { duration: 0.1 },
+    );
+
+    await animate(
+      `div:nth-child(${index + 1})`,
+      {
+        transform: "translateY(-80%)",
+        opacity: 0.5,
+      },
+      { duration: 0.1 },
+    );
+
+    await animate(
+      `div:nth-child(${index + 1})`,
+      {
+        transform: "translateY(0%)",
+        opacity: 0.2,
+      },
+      { duration: 0.1 },
+    );
+  };
+
+  const loadingAnimationRef = useRef<Promise<void> | null>(null);
+
+  const loadingAnimation = async () => {
+    animate("div:nth-child(1)", { opacity: 0 }, { duration: 0.1 });
+    animate("div:nth-child(3)", { opacity: 0 }, { duration: 0.1 });
+
+    await animate(
+      "div:nth-child(2)",
+      {
+        opacity: 1,
+        transform: "scale(2.7)",
+        backgroundColor: TAILWIND.theme.colors["blue"][500],
+      },
+      { duration: 0.6 },
+    );
+    await animate(
+      "div:nth-child(2)",
+      {
+        transform: "scale(1)",
+        opacity: 0.2,
+        backgroundColor: TAILWIND.theme.colors["white"],
+      },
+      { duration: 0.3 },
+    );
+  };
+
+  useEffect(() => {
+    if (isFetching) {
+      loadingAnimationRef.current = loadingAnimation();
+    } else {
+      if (loadingAnimationRef.current) {
+        loadingAnimationRef.current.then(() => {
+          typingAnimation();
+        });
+      } else {
+        typingAnimation();
+      }
+    }
+  }, [index, isFetching]);
+
+  return (
+    <div
+      ref={scope}
+      className={`flex items-center justify-center gap-1 transition-opacity ${
+        isTyping ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>
+      <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>
+      <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>
+    </div>
+  );
+};

From ecb64481547cc12cb491132a52a0c74b50fdd1ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Thu, 30 Nov 2023 12:52:16 +0100
Subject: [PATCH 8/9] keyboard selection shortcuts for navigating search
 results

---
 components/markets/MarketSearch.tsx | 67 +++++++++++++++++++++++++++--
 components/ui/TypingIndicator.tsx   |  6 ++-
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 7e468cfec..2ef297faa 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -3,13 +3,23 @@ import { MarketStatus } from "@zeitgeistpm/indexer";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import Link from "next/link";
 import { FaDeleteLeft } from "react-icons/fa6";
-import { Fragment, RefObject, use, useEffect, useRef, useState } from "react";
+import {
+  Fragment,
+  KeyboardEventHandler,
+  RefObject,
+  use,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Search, X } from "react-feather";
 import { AnimatePresence, Variants, motion, useAnimate } from "framer-motion";
 import { TAILWIND } from "lib/constants";
 import { TypingIndicator } from "components/ui/TypingIndicator";
+import { useRouter } from "next/router";
 
 const MarketSearch = () => {
+  const router = useRouter();
   const [searchTerm, setSearchTerm] = useState("");
   const [showResults, setShowResults] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
@@ -30,6 +40,45 @@ const MarketSearch = () => {
     };
   }, [wrapperRef]);
 
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const selectedRef = useRef<HTMLAnchorElement>(null);
+
+  const onKeyDownHandler: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (event.key === "ArrowDown" && markets) {
+      event.preventDefault();
+      if (selectedIndex === null) {
+        setSelectedIndex(0);
+      } else if (selectedIndex < markets.length - 1) {
+        setSelectedIndex(selectedIndex + 1);
+      }
+    } else if (event.key === "ArrowUp" && markets) {
+      event.preventDefault();
+      if (selectedIndex === null) {
+        setSelectedIndex(markets.length - 1);
+      } else if (selectedIndex > 0) {
+        setSelectedIndex(selectedIndex - 1);
+      }
+    } else if (event.key === "Enter" && markets && selectedIndex !== null) {
+      router.push(`/markets/${markets[selectedIndex].marketId}`);
+      setTimeout(() => {
+        setShowResults(false);
+        setSearchTerm("");
+        inputRef.current?.blur();
+      }, 100);
+    } else {
+      setSelectedIndex(null);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedIndex !== null) {
+      selectedRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [selectedIndex]);
+
   return (
     <div className="mx-3 w-full md:mx-7" ref={wrapperRef}>
       <Link href={"/search"} className="w-2 lg:hidden">
@@ -50,6 +99,7 @@ const MarketSearch = () => {
               setShowResults(true);
               setSearchTerm(event.target.value);
             }}
+            onKeyDown={onKeyDownHandler}
             onFocus={() => {
               if (searchTerm?.length > 0) {
                 setShowResults(true);
@@ -58,7 +108,11 @@ const MarketSearch = () => {
           />
 
           <div className="absolute right-12 top-[50%] translate-y-[-50%]">
-            <TypingIndicator inputRef={inputRef} isFetching={isFetching} />
+            <TypingIndicator
+              disabled={selectedIndex !== null}
+              inputRef={inputRef}
+              isFetching={isFetching}
+            />
           </div>
 
           {showSearch && (
@@ -106,13 +160,18 @@ const MarketSearch = () => {
         <div className=" absolute top-[45px] hidden max-h-[420px] w-[500px] flex-col rounded-md bg-white px-2 py-4 shadow-2xl lg:flex">
           <div className="subtle-scroll-bar overflow-y-scroll">
             {markets?.length ? (
-              markets?.map((market) => (
+              markets?.map((market, index) => (
                 <Link
+                  key={market.marketId}
                   href={`/markets/${market.marketId}`}
-                  className="flex justify-between overflow-ellipsis rounded-md px-4 py-2 hover:bg-sky-100"
+                  className={`flex justify-between overflow-ellipsis rounded-md px-4 py-2 
+                    ${selectedIndex === index && "bg-sky-100"}
+                    ${selectedIndex === null && "hover:bg-sky-100"}
+                  `}
                   onClick={() => {
                     setShowResults(false);
                   }}
+                  ref={selectedIndex === index ? selectedRef : undefined}
                 >
                   <div className="line-clamp-1 w-85% overflow-ellipsis">
                     {market.question}
diff --git a/components/ui/TypingIndicator.tsx b/components/ui/TypingIndicator.tsx
index 63807ce5f..3f7c958c3 100644
--- a/components/ui/TypingIndicator.tsx
+++ b/components/ui/TypingIndicator.tsx
@@ -5,9 +5,11 @@ import { RefObject, useEffect, useRef, useState } from "react";
 export const TypingIndicator = ({
   inputRef,
   isFetching,
+  disabled,
 }: {
   inputRef: RefObject<HTMLInputElement>;
   isFetching: boolean;
+  disabled?: boolean;
 }) => {
   const [index, setIndex] = useState(0);
   const [isTyping, setIsTyping] = useState(false);
@@ -36,6 +38,7 @@ export const TypingIndicator = ({
   }, [inputRef]);
 
   const typingAnimation = async () => {
+    if (disabled) return;
     animate(
       "div",
       { transform: "translateY(0%)", opacity: 0.2 },
@@ -64,6 +67,7 @@ export const TypingIndicator = ({
   const loadingAnimationRef = useRef<Promise<void> | null>(null);
 
   const loadingAnimation = async () => {
+    if (disabled) return;
     animate("div:nth-child(1)", { opacity: 0 }, { duration: 0.1 });
     animate("div:nth-child(3)", { opacity: 0 }, { duration: 0.1 });
 
@@ -105,7 +109,7 @@ export const TypingIndicator = ({
     <div
       ref={scope}
       className={`flex items-center justify-center gap-1 transition-opacity ${
-        isTyping ? "opacity-100" : "opacity-0"
+        isTyping && !disabled ? "opacity-100" : "opacity-0"
       }`}
     >
       <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>

From 75b0aebd3732175bd06adf3a2408ed5cac63056b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Fri, 1 Dec 2023 13:09:21 +0100
Subject: [PATCH 9/9] implement typing indicator on mobile

---
 components/ui/TypingIndicator.tsx | 8 ++++----
 pages/search.tsx                  | 9 +++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/ui/TypingIndicator.tsx b/components/ui/TypingIndicator.tsx
index 3f7c958c3..e7bcc1207 100644
--- a/components/ui/TypingIndicator.tsx
+++ b/components/ui/TypingIndicator.tsx
@@ -85,7 +85,7 @@ export const TypingIndicator = ({
       {
         transform: "scale(1)",
         opacity: 0.2,
-        backgroundColor: TAILWIND.theme.colors["white"],
+        backgroundColor: TAILWIND.theme.colors["gray"][500],
       },
       { duration: 0.3 },
     );
@@ -112,9 +112,9 @@ export const TypingIndicator = ({
         isTyping && !disabled ? "opacity-100" : "opacity-0"
       }`}
     >
-      <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>
-      <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>
-      <motion.div className="h-1 w-1 rounded-full bg-white"></motion.div>
+      <motion.div className="h-1 w-1 rounded-full bg-gray-500"></motion.div>
+      <motion.div className="h-1 w-1 rounded-full bg-gray-500"></motion.div>
+      <motion.div className="h-1 w-1 rounded-full bg-gray-500"></motion.div>
     </div>
   );
 };
diff --git a/pages/search.tsx b/pages/search.tsx
index c38f494e1..f7eb07b90 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,14 +1,16 @@
 import { MarketStatus } from "@zeitgeistpm/indexer";
+import { TypingIndicator } from "components/ui/TypingIndicator";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import { NextPage } from "next";
 import Link from "next/link";
 import { use, useEffect, useRef, useState } from "react";
 import { X } from "react-feather";
+import { FaDeleteLeft } from "react-icons/fa6";
 
 const SearchPage: NextPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
 
-  const { data: markets } = useMarketSearch(searchTerm);
+  const { data: markets, isFetching } = useMarketSearch(searchTerm);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -29,13 +31,16 @@ const SearchPage: NextPage = () => {
             setSearchTerm(event.target.value);
           }}
         />
+        <div className="absolute right-12 top-[50%] translate-y-[-50%]">
+          <TypingIndicator inputRef={inputRef} isFetching={isFetching} />
+        </div>
         <button
           className="absolute right-6 text-sky-600"
           onClick={() => {
             setSearchTerm("");
           }}
         >
-          <X size={16} />
+          <FaDeleteLeft size={16} />
         </button>
       </div>
       {markets && (