update search feature

src/lib/components/Searchbar.svelte

@@ -1,40 +1,50 @@
 <script lang="ts">
-  import { searchBarData, screenWidth } from "$lib/store";
+  import { screenWidth } from "$lib/store";
   import { onMount } from "svelte";
   import Search from "lucide-svelte/icons/search";
   import { goto } from "$app/navigation";
   let searchHistory = [];
-  let searchResults = [];
   let updatedSearchHistory = [];
+  let searchBarData = [];
 
-  let dataLoaded = false; // Flag to track data loading
+  let timeoutId;
-
   let assetType = "";
   let focusedSuggestion = "";
   let arrowMovement = false;
   let showSuggestions = false;
-  let notFoundTicker = false;
   let searchQuery = "";
 
   let searchOpen = false;
   let searchBarModalChecked = false; // Initialize it to false
   let inputElement;
 
-  async function loadSearchData() {
+  const popularList = [
-    if ($searchBarData.length !== 0 || dataLoaded) return;
+    {
-    else {
+      symbol: "KO",
-      dataLoaded = true;
+      name: "Coca Cola Company",
-      // make the GET request to the endpoint
+      type: "Stock",
-      const response = await fetch("/api/searchbar-data", {
+    },
-        method: "GET",
+    {
-        headers: {
+      symbol: "TSLA",
-          "Content-Type": "application/json",
+      name: "Tesla Inc",
-        },
+      type: "Stock",
-      });
+    },
-
+    {
-      $searchBarData = await response.json();
+      symbol: "AMD",
-    }
+      name: "Advanced Micro Devices",
-  }
+      type: "Stock",
+    },
+    {
+      symbol: "SPY",
+      name: "SPDR S&P 500 ETF Trust",
+      type: "ETF",
+    },
+    {
+      symbol: "NVDA",
+      name: "Nvidia",
+      type: "Stock",
+    },
+  ];
 
   async function popularTicker(state) {
     searchOpen = false;
@@ -44,7 +54,7 @@
     const upperState = state.toUpperCase();
 
     // Find the matching ticker data
-    const newSearchItem = $searchBarData?.find(
+    const newSearchItem = searchBarData?.find(
       ({ symbol }) => symbol === upperState,
     );
 
@@ -68,10 +78,11 @@
     // Early return if state is empty or ticker not found
     if (
       !state ||
-      !$searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
+      !searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
     ) {
-      notFoundTicker = false;
       searchQuery = "";
+      const closePopup = document.getElementById("searchBarModal");
+      closePopup?.dispatchEvent(new MouseEvent("click"));
       return;
     }
 
@@ -79,7 +90,7 @@
     const upperState = state.toUpperCase();
 
     // Find the matching ticker data
-    const newSearchItem = $searchBarData?.find(
+    const newSearchItem = searchBarData?.find(
       ({ symbol }) => symbol === upperState,
     );
 
@@ -101,79 +112,34 @@
     searchQuery = "";
   }
 
-  function search() {
+  async function search() {
-    const normalizedSearchQuery = searchQuery?.toLowerCase();
+    clearTimeout(timeoutId); // Clear any existing timeout
 
-    // Define names for which symbols without dots should be prioritized
+    if (!searchQuery.trim()) {
-    const prioritizeWithoutDotsForNames = [
+      // Skip if query is empty or just whitespace
-      "apple" /* Add more names as needed */,
+      searchBarData = []; // Clear previous results
-    ];
+      return;
+    }
 
-    const filteredList = $searchBarData
+    timeoutId = setTimeout(async () => {
-      ?.map((item) => ({
+      const response = await fetch(
-        ...item,
+        `/api/searchbar?query=${encodeURIComponent(searchQuery)}&limit=10`,
-        nameLower: item?.name?.toLowerCase(),
-        symbolLower: item?.symbol?.toLowerCase(),
-      }))
-      ?.filter(
-        ({ nameLower, symbolLower }) =>
-          nameLower?.includes(normalizedSearchQuery) ||
-          symbolLower?.includes(normalizedSearchQuery),
       );
-
+      searchBarData = await response?.json();
-    filteredList?.sort((a, b) => {
+    }, 50); // delay
-      const aSymbolLower = a?.symbolLower;
+    console.log(searchBarData);
-      const bSymbolLower = b?.symbolLower;
-      const aNameLower = a?.nameLower;
-      const bNameLower = b?.nameLower;
-
-      // Check for exact symbol matches
-      const isExactMatchA = aSymbolLower === normalizedSearchQuery;
-      const isExactMatchB = bSymbolLower === normalizedSearchQuery;
-
-      if (isExactMatchA && !isExactMatchB) {
-        return -1; // Prioritize exact symbol match for A
-      } else if (!isExactMatchA && isExactMatchB) {
-        return 1; // Prioritize exact symbol match for B
-      }
-
-      const aSymbolIndex = aSymbolLower?.indexOf(normalizedSearchQuery);
-      const bSymbolIndex = bSymbolLower?.indexOf(normalizedSearchQuery);
-
-      const aNameIndex = aNameLower?.indexOf(normalizedSearchQuery);
-      const bNameIndex = bNameLower?.indexOf(normalizedSearchQuery);
-
-      // If no exact symbol match, prioritize based on the combined position in name and symbol
-      const positionComparison =
-        aSymbolIndex + aNameIndex - (bSymbolIndex + bNameIndex);
-
-      // Additional condition for prioritizing symbols without dots for specific names
-      if (prioritizeWithoutDotsForNames.includes(normalizedSearchQuery)) {
-        const aHasDot = aSymbolLower?.includes(".") || false;
-        const bHasDot = bSymbolLower?.includes(".") || false;
-
-        // Prioritize results without dots for the specified names
-        return aHasDot - bHasDot || positionComparison;
-      }
-
-      return positionComparison;
-    });
-
-    searchResults = filteredList?.slice(0, 5);
-    showSuggestions = normalizedSearchQuery !== "";
   }
 
   const onKeyPress = (e) => {
-    if (e?.charCode === 13) {
+    if (e?.charCode === 13 && searchBarData?.length > 0) {
       const assetActions = {
         ETF: () => goto(`/etf/${searchQuery}`),
         Stock: () => goto(`/stocks/${searchQuery}`),
         Crypto: () => goto(`/crypto/${searchQuery}`),
       };
-      console.log(arrowMovement);
+      if (!arrowMovement && searchBarData?.length > 0) {
-      if (!arrowMovement && searchResults?.length > 0) {
+        searchQuery = searchBarData.at(0).symbol;
-        searchQuery = searchResults.at(0).symbol;
+        assetType = searchBarData.at(0).type;
-        assetType = searchResults.at(0).type;
       }
 
       // Call the function for the selected asset type
@@ -182,8 +148,6 @@
       // Trigger search bar action
       searchBarTicker(searchQuery);
     }
-
-    console.log(focusedSuggestion);
   };
 
   function handleKeyDown(event) {
@@ -192,7 +156,7 @@
     event.preventDefault(); // Prevent scrolling
 
     const list = showSuggestions
-      ? searchResults
+      ? searchBarData
       : searchHistory?.length > 0
         ? searchHistory
         : popularList;
@@ -223,8 +187,6 @@
       const keyboardSearch = document.getElementById("searchBarModal");
       keyboardSearch?.dispatchEvent(new MouseEvent("click"));
       event.preventDefault();
-
-      await loadSearchData();
     }
   };
 
@@ -265,42 +227,6 @@
 
   let charNumber = 20;
 
-  let popularList = [];
-  const popularSymbols = [
-    "BTCUSD",
-    "ETHUSD",
-    "SOLUSD",
-    "SPY",
-    "ADBE",
-    "DBX",
-    "HOOD",
-    "AMZN",
-    "TSLA",
-    "AMD",
-    "MCD",
-    "NVDA",
-    "PYPL",
-    "AAPL",
-    "BYND",
-    "KO",
-  ];
-
-  $: {
-    if ($searchBarData && popularList?.length === 0) {
-      popularList = $searchBarData?.filter(({ symbol }) =>
-        popularSymbols?.includes(symbol),
-      );
-
-      // Fisher-Yates (Knuth) Shuffle Algorithm
-      for (let i = popularList?.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [popularList[i], popularList[j]] = [popularList[j], popularList[i]];
-      }
-
-      popularList = popularList?.slice(0, 5);
-    }
-  }
-
   $: {
     if (searchBarModalChecked === true && typeof window !== "undefined") {
       if ($screenWidth > 640) {
@@ -318,12 +244,6 @@
     }
   }
 
-  $: {
-    if (searchQuery?.length !== 0) {
-      notFoundTicker = false;
-    }
-  }
-
   $: {
     if (updatedSearchHistory?.length > 0 && searchBarModalChecked === false) {
       (async () => {
@@ -337,84 +257,25 @@
       })();
     }
   }
+
+  $: {
+    if (searchBarData) {
+      if (searchBarData?.length > 0) {
+        showSuggestions = true;
+      } else {
+        showSuggestions = false;
+      }
+    }
+  }
 </script>
 
 <label
-  on:mouseover={loadSearchData}
-  on:click={loadSearchData}
   for="searchBarModal"
   class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-lg"
 >
   <Search class="h-[20px] w-[20px]" />
 </label>
 
-<!--
-<div class="ml-5 w-96 grow">
-    <div class="relative flex items-center">
-      <div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
-        <svg 
-          class="text-icon h-5 w-5" 
-          fill="none" 
-          stroke-linecap="round" 
-          stroke-linejoin="round" 
-          stroke-width="3" 
-          stroke="currentColor" 
-          viewBox="0 0 24 24" 
-          style="max-width: 40px" 
-          aria-hidden="true"
-        >
-          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-        </svg>
-      </div>
-      <input 
-        class="rounded-lg py-1.5 pl-10 text-sm placeholder-gray-400 border border-[#313131] delay-100 transition ease-out focus:outline-none focus:ring-1 tiny:pl-8 xs:pl-10 xs:text-base md:py-2 w-full bg-[#313131]" 
-        type="text" 
-        aria-label="Search" 
-        role="combobox" 
-        aria-expanded="false" 
-        aria-controls="owned_listbox" 
-        autocomplete="off" 
-        spellcheck="false" 
-        aria-autocomplete="list" 
-        placeholder="Company or stock symbol..." 
-        name="q"
-      >
-    </div>
-
-    <div class="absolute top-11 z-40 max-h-[265px] w-96 overflow-y-auto border-default bg-[#313131] border border-[#313131]">
-      <h4 class="border-b px-2 py-1.5 text-left text-md font-semibold sm:px-3">
-        Popular
-      </h4>
-      <ul class="text-sm" >
-        {#if !showSuggestions }
-          {#each popularList as item}
-            <li>
-              <a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group' : 'shake-ticker cursor-pointer border-b border-gray-600 flex justify-start items-center p-2 text-white  group'} w-full">
-                <div class="flex flex-row items-center w-full">
-                  <div class="flex flex-col ml-2">
-                    <span class="text-blue-400">{item?.symbol}</span>
-                    <span class="text-white">{item?.name.length > 150 ? item?.name?.slice(0,150) + "..." : item?.name}</span>
-                  </div>
-
-                  <div class="text-white text-sm font-medium ml-auto">
-                    {item?.type}
-                  </div>
-                
-                </div>
-                 
-
-              </a>
-              
-          </li>
-          {/each}
-          {/if}
-      </ul>
-    </div>
-
-
-</div>
--->
-
 <!--Start Desktop Searchbar-->
 <!--Don't remove if since input.focus does not work anymore-->
 
@@ -469,125 +330,108 @@
         </div>
       </div>
 
-      {#if $searchBarData?.length !== 0}
+      <div class="py-4">
-        <div class="py-4">
+        <!-- Popular searches -->
-          <!-- Popular searches -->
+        <div class="mb-3 last:mb-0 mt-3">
-          <div class="mb-3 last:mb-0 mt-3">
+          {#if !showSuggestions}
-            {#if notFoundTicker}
+            <div class="text-start text-sm font-semibold text-white mb-2">
-              <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
+              {searchHistory?.length > 0 ? "Recent" : "Popular"}
-                Oh snapp, ticker does not exist in our database
+            </div>
-              </p>
+          {/if}
-            {/if}
+
+          <ul class="text-sm">
             {#if !showSuggestions}
-              <div class="text-start text-sm font-semibold text-white mb-2">
+              {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
-                {searchHistory?.length > 0 ? "Recent" : "Popular"}
+                <li class="border-b border-gray-600">
-              </div>
+                  <a
-            {/if}
+                    href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-            <ul class="text-sm">
+                    on:click={() => popularTicker(item?.symbol)}
-              {#if !showSuggestions}
+                    class="mb-2 {item?.symbol === focusedSuggestion
-                {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
+                      ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                  <li class="border-b border-gray-600">
+                      : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white  group'} w-full"
-                    <a
-                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-                      on:click={() => popularTicker(item?.symbol)}
-                      class="mb-2 {item?.symbol === focusedSuggestion
-                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                        : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white  group'} w-full"
-                    >
-                      <div class="flex flex-row items-center w-full">
-                        <div
-                          class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
-                        >
-                          <img
-                            style="clip-path: circle(50%);"
-                            class="w-6 h-6"
-                            src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
-                            loading="lazy"
-                          />
-                        </div>
-                        <div class="flex flex-col ml-2">
-                          <span class="text-blue-400">{item?.symbol}</span>
-                          <span class="text-white"
-                            >{item?.name.length > 150
-                              ? item?.name?.slice(0, 150) + "..."
-                              : item?.name}</span
-                          >
-                        </div>
-
-                        <div class="text-white font-medium ml-auto">
-                          {item?.type}
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                {/each}
-              {:else if showSuggestions && searchResults?.length > 0}
-                <div class="text-start text-sm font-semibold text-white mb-2">
-                  Suggestions
-                </div>
-                {#each searchResults as item}
-                  <li class="border-b border-gray-600">
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-label-has-associated-control -->
-                    <a
-                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-                      on:click={() => searchBarTicker(item?.symbol)}
-                      class="mb-2 {item?.symbol === focusedSuggestion
-                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                        : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'}"
-                    >
-                      <div class="flex flex-row items-center w-full">
-                        <div class="flex flex-col">
-                          <span class="text-blue-400">{item?.symbol}</span>
-                          <span class="text-white"
-                            >{item?.name?.length > 150
-                              ? item?.name?.slice(0, 150) + "..."
-                              : item?.name}</span
-                          >
-                        </div>
-
-                        <div class="text-white font-medium ml-auto">
-                          {item?.type}
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                {/each}
-              {:else if showSuggestions && searchResults?.length === 0}
-                <li>
-                  <label
-                    class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
                   >
-                    <svg
+                    <div class="flex flex-row items-center w-full">
-                      class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
+                      <div
-                      width="12"
+                        class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
-                      height="12"
+                      >
-                      viewBox="0 0 12 12"
+                        <img
-                      xmlns="http://www.w3.org/2000/svg"
+                          style="clip-path: circle(50%);"
-                    >
+                          class="w-6 h-6"
-                      <path
+                          src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
-                        d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
+                          loading="lazy"
-                      />
+                        />
-                    </svg>
+                      </div>
-                    <span>No results found</span>
+                      <div class="flex flex-col ml-2">
-                  </label>
+                        <span class="text-blue-400">{item?.symbol}</span>
+                        <span class="text-white"
+                          >{item?.name.length > 150
+                            ? item?.name?.slice(0, 150) + "..."
+                            : item?.name}</span
+                        >
+                      </div>
+
+                      <div class="text-white font-medium ml-auto">
+                        {item?.type}
+                      </div>
+                    </div>
+                  </a>
                 </li>
-              {/if}
+              {/each}
-            </ul>
+            {:else if showSuggestions && searchBarData?.length > 0}
-          </div>
+              <div class="text-start text-sm font-semibold text-white mb-2">
+                Suggestions
+              </div>
+              {#each searchBarData as item}
+                <li class="border-b border-gray-600">
+                  <!-- svelte-ignore a11y-click-events-have-key-events -->
+                  <!-- svelte-ignore a11y-label-has-associated-control -->
+                  <a
+                    href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                    on:click={() => searchBarTicker(item?.symbol)}
+                    class="mb-2 {item?.symbol === focusedSuggestion
+                      ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                      : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'}"
+                  >
+                    <div class="flex flex-row items-center w-full">
+                      <div class="flex flex-col">
+                        <span class="text-blue-400">{item?.symbol}</span>
+                        <span class="text-white"
+                          >{item?.name?.length > 150
+                            ? item?.name?.slice(0, 150) + "..."
+                            : item?.name}</span
+                        >
+                      </div>
+
+                      <div class="text-white font-medium ml-auto">
+                        {item?.type}
+                      </div>
+                    </div>
+                  </a>
+                </li>
+              {/each}
+            {:else if showSuggestions && searchBarData?.length === 0}
+              <li>
+                <label
+                  class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
+                >
+                  <svg
+                    class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
+                    />
+                  </svg>
+                  <span>No results found</span>
+                </label>
+              </li>
+            {/if}
+          </ul>
         </div>
-      {:else}
+      </div>
-        <div class="flex justify-center items-center m-auto mt-4 py-20">
-          <div class="relative">
-            <label
-              class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            >
-              <span class="loading loading-spinner loading-md text-gray-400"
-              ></span>
-            </label>
-          </div>
-        </div>
-      {/if}
 
       <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
         <svg
@@ -658,119 +502,107 @@
           </div>
         </div>
 
-        {#if $searchBarData?.length !== 0}
+        <div class="py-4">
-          <div class="py-4">
+          <!-- Popular searches -->
-            <!-- Popular searches -->
+          <div class="mb-3 last:mb-0 mt-3">
-            <div class="mb-3 last:mb-0 mt-3">
+            {#if !showSuggestions}
-              {#if notFoundTicker}
+              <div class="text-start text-sm font-semibold text-white mb-2">
-                <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
+                {searchHistory?.length > 0 ? "Recent" : "Popular"}
-                  Oh snapp, ticker does not exist in our database
+              </div>
-                </p>
+            {/if}
-              {/if}
+            <ul class="text-sm">
               {#if !showSuggestions}
-                <div class="text-start text-sm font-semibold text-white mb-2">
+                {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
-                  {searchHistory?.length > 0 ? "Recent" : "Popular"}
+                  <li class="border-b border-gray-600">
-                </div>
+                    <a
-              {/if}
+                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-              <ul class="text-sm">
+                      on:click={() => popularTicker(item?.symbol)}
-                {#if !showSuggestions}
+                      class="mb-2 {item?.symbol === focusedSuggestion
-                  {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
+                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                    <li class="border-b border-gray-600">
+                        : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
-                      <a
-                        href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-                        on:click={() => popularTicker(item?.symbol)}
-                        class="mb-2 {item?.symbol === focusedSuggestion
-                          ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                          : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
-                      >
-                        <div class="flex flex-row items-center w-full">
-                          <div
-                            class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
-                          >
-                            <img
-                              style="clip-path: circle(50%);"
-                              class="w-6 h-6"
-                              src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
-                              loading="lazy"
-                            />
-                          </div>
-                          <div class="flex flex-col ml-2">
-                            <span class="text-blue-400">{item?.symbol}</span>
-                            <span class="text-white"
-                              >{item?.name.length > charNumber
-                                ? item?.name.slice(0, charNumber) + "..."
-                                : item?.name}</span
-                            >
-                          </div>
-
-                          <div class="text-white font-medium ml-auto mr-2">
-                            {item?.type}
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                  {/each}
-                {:else if showSuggestions && searchResults?.length > 0}
-                  <div class="text-start text-sm font-semibold text-white mb-2">
-                    Suggestions
-                  </div>
-                  {#each searchResults as item}
-                    <li class="border-b border-gray-600">
-                      <!-- svelte-ignore a11y-click-events-have-key-events -->
-                      <!-- svelte-ignore a11y-label-has-associated-control -->
-                      <a
-                        href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
-                        on:click={() => searchBarTicker(item?.symbol)}
-                        class="mb-2 {item?.symbol === focusedSuggestion
-                          ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
-                          : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}"
-                      >
-                        <div class="flex flex-row items-center w-full">
-                          <div class="flex flex-col ml-1">
-                            <span class="text-blue-400">{item?.symbol}</span>
-                            <span class="text-white"
-                              >{item?.name.length > charNumber
-                                ? item?.name.slice(0, charNumber) + "..."
-                                : item?.name}</span
-                            >
-                          </div>
-
-                          <div class="text-white font-medium ml-auto mr-2">
-                            {item?.type}
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                  {/each}
-                {:else if showSuggestions && searchResults?.length === 0}
-                  <li>
-                    <label
-                      class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
                     >
-                      <svg
+                      <div class="flex flex-row items-center w-full">
-                        class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
+                        <div
-                        width="12"
+                          class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
-                        height="12"
+                        >
-                        viewBox="0 0 12 12"
+                          <img
-                        xmlns="http://www.w3.org/2000/svg"
+                            style="clip-path: circle(50%);"
-                      >
+                            class="w-6 h-6"
-                        <path
+                            src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
-                          d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
+                            loading="lazy"
-                        />
+                          />
-                      </svg>
+                        </div>
-                      <span>No results found</span>
+                        <div class="flex flex-col ml-2">
-                    </label>
+                          <span class="text-blue-400">{item?.symbol}</span>
+                          <span class="text-white"
+                            >{item?.name.length > charNumber
+                              ? item?.name.slice(0, charNumber) + "..."
+                              : item?.name}</span
+                          >
+                        </div>
+
+                        <div class="text-white font-medium ml-auto mr-2">
+                          {item?.type}
+                        </div>
+                      </div>
+                    </a>
                   </li>
-                {/if}
+                {/each}
-              </ul>
+              {:else if showSuggestions && searchBarData?.length > 0}
-            </div>
+                <div class="text-start text-sm font-semibold text-white mb-2">
+                  Suggestions
+                </div>
+                {#each searchBarData as item}
+                  <li class="border-b border-gray-600">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-label-has-associated-control -->
+                    <a
+                      href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
+                      on:click={() => searchBarTicker(item?.symbol)}
+                      class="mb-2 {item?.symbol === focusedSuggestion
+                        ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
+                        : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}"
+                    >
+                      <div class="flex flex-row items-center w-full">
+                        <div class="flex flex-col ml-1">
+                          <span class="text-blue-400">{item?.symbol}</span>
+                          <span class="text-white"
+                            >{item?.name.length > charNumber
+                              ? item?.name.slice(0, charNumber) + "..."
+                              : item?.name}</span
+                          >
+                        </div>
+
+                        <div class="text-white font-medium ml-auto mr-2">
+                          {item?.type}
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                {/each}
+              {:else if showSuggestions && searchBarData?.length === 0}
+                <li>
+                  <label
+                    class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
+                  >
+                    <svg
+                      class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
+                      />
+                    </svg>
+                    <span>No results found</span>
+                  </label>
+                </li>
+              {/if}
+            </ul>
           </div>
-        {:else}
+        </div>
-          <div class="flex justify-center items-center m-auto mt-4 py-20">
-            <span class="loading loading-lg loading-spinner text-success"
-            ></span>
-          </div>
-        {/if}
 
         <label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
           <svg

src/routes/+layout.svelte

@@ -14,7 +14,6 @@
   import Footer from "$lib/components/Footer.svelte";
   import Searchbar from "$lib/components/Searchbar.svelte";
   import NotificationBell from "$lib/components/NotificationBell.svelte";
-  import defaultAvatar from "$lib/images/default_avatar.png";
   import { goto } from "$app/navigation";
   //import PullToRefresh from '$lib/components/PullToRefresh.svelte';
 
@@ -833,7 +832,7 @@ const handleTwitchMessage = (event) => {
             <DropdownMenu.Trigger asChild let:builder>
               <Button
                 size="icon"
-                class="overflow-hidden rounded-lg bg-[#09090B] border border-gray-600 w-10 h-10"
+                class="overflow-hidden rounded-lg bg-[#09090B] sm:hover:bg-[#27272A] border border-gray-600 w-10 h-10"
                 builders={[builder]}
               >
                 <svg

src/routes/api/searchbar-data/+server.ts

@@ -1,17 +0,0 @@
-import type { RequestHandler } from "./$types";
-
-export const GET: RequestHandler = async ({ locals }) => {
-  const { apiURL, apiKey } = locals;
-
-  const response = await fetch(apiURL + "/searchbar-data", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      "X-API-KEY": apiKey,
-    },
-  });
-
-  const output = await response?.json();
-
-  return new Response(JSON.stringify(output));
-};

src/routes/api/searchbar/+server.ts

@@ -0,0 +1,17 @@
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+  const { apiURL, apiKey } = locals;
+  const query = url.searchParams.get("query") || "";
+
+  const response = await fetch(`${apiURL}/searchbar?query=${encodeURIComponent(query)}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "X-API-KEY": apiKey,
+    },
+  });
+
+  const output = await response.json();
+  return new Response(JSON.stringify(output));
+};

src/routes/crypto/[tickerID]/+layout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {
-    searchBarData,
     globalForm,
     screenWidth,
     openPriceAlert,
@@ -26,22 +25,6 @@
   //$cryptoTicker = data?.getTicker;
   $realtimePrice = null;
 
-  async function loadSearchData() {
-    if ($searchBarData?.length !== 0) {
-      return;
-    } else {
-      // make the GET request to the endpoint
-      const response = await fetch("/api/searchbar-data", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      $searchBarData = await response.json();
-    }
-  }
-
   let previousRealtimePrice = null;
   let previousTicker;
   let socket;
@@ -417,11 +400,7 @@
                     </div>
 
                     <!--Start Search Button-->
-                    <label
+                    <label class="ml-auto mr-4" for="searchBarModal">
-                      on:click={loadSearchData}
-                      class="ml-auto mr-4"
-                      for="searchBarModal"
-                    >
                       <svg
                         class="w-6 h-6 inline-block"
                         xmlns="http://www.w3.org/2000/svg"

src/routes/etf/[tickerID]/+layout.svelte

@@ -34,22 +34,6 @@
   //$etfTicker = data?.getTicker;
   $realtimePrice = null;
 
-  async function loadSearchData() {
-    if ($searchBarData?.length !== 0) {
-      return;
-    } else {
-      // make the GET request to the endpoint
-      const response = await fetch("/api/searchbar-data", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      $searchBarData = await response.json();
-    }
-  }
-
   let previousRealtimePrice = null;
   let previousTicker;
   let socket;
@@ -447,11 +431,7 @@
                     </div>
 
                     <!--Start Search Button-->
-                    <label
+                    <label class="ml-auto mr-4" for="searchBarModal">
-                      on:click={loadSearchData}
-                      class="ml-auto mr-4"
-                      for="searchBarModal"
-                    >
                       <svg
                         class="w-6 h-6 inline-block"
                         xmlns="http://www.w3.org/2000/svg"

src/routes/stocks/[tickerID]/+layout.svelte

@@ -2,7 +2,6 @@
   import {
     wsBidPrice,
     wsAskPrice,
-    searchBarData,
     globalForm,
     scoreComponent,
     screenWidth,
@@ -28,22 +27,6 @@
   export let data;
   $: $realtimePrice = data?.getStockQuote?.price?.toFixed(2);
 
-  async function loadSearchData() {
-    if ($searchBarData?.length !== 0) {
-      return;
-    } else {
-      // make the GET request to the endpoint
-      const response = await fetch("/api/searchbar-data", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      $searchBarData = await response.json();
-    }
-  }
-
   let previousRealtimePrice = null;
   let previousTicker;
   let socket;
@@ -392,11 +375,7 @@ function handleTypeOfTrade(state:string)
                     </div>
 
                     <!--Start Search Button-->
-                    <label
+                    <label class="ml-auto mr-4" for="searchBarModal">
-                      on:click={loadSearchData}
-                      class="ml-auto mr-4"
-                      for="searchBarModal"
-                    >
                       <svg
                         class="w-6 h-6 inline-block"
                         xmlns="http://www.w3.org/2000/svg"