From d02b71b6dd3d3c3d3cf810dc1c71ecd689d00166 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 21 Sep 2024 17:34:35 +0200
Subject: [PATCH] prefetching data

---
 src/lib/components/NotificationBell.svelte |  5 ++---
 src/lib/components/PriceAlert.svelte       |  8 ++++----
 src/lib/components/Searchbar.svelte        | 14 ++++++--------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/NotificationBell.svelte b/src/lib/components/NotificationBell.svelte
index c6905cfc..afe78e84 100644
--- a/src/lib/components/NotificationBell.svelte
+++ b/src/lib/components/NotificationBell.svelte
@@ -11,14 +11,13 @@
 
 async function toggle() {
   hasUnreadElement = false;
-  goto('/notifications')
 }
 </script>
 
   <!--Start Notification Bell-->
   {#if data?.user}
   
-  <div on:click={toggle} class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1">
+  <a href="/notifications" on:click={toggle} class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1">
       <Bell class="h-[20px] w-[20px]" />  
 
     {#if hasUnreadElement}
@@ -30,7 +29,7 @@ async function toggle() {
     
     {/if}
 
-  </div>
+  </a>
   
 {/if}
 
diff --git a/src/lib/components/PriceAlert.svelte b/src/lib/components/PriceAlert.svelte
index a30a92e5..5a0163a5 100644
--- a/src/lib/components/PriceAlert.svelte
+++ b/src/lib/components/PriceAlert.svelte
@@ -19,6 +19,9 @@
         }
         else 
         {
+            const closePopup = document.getElementById("priceAlertModal");
+            closePopup?.dispatchEvent(new MouseEvent('click'))
+
             const postData = {
             'userId': data?.user?.id,
             'symbol': $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker,
@@ -37,11 +40,8 @@
                 },
                 body: JSON.stringify(postData)
             });
-    
+            
             const output = (await response.json())?.items
-
-             const closePopup = document.getElementById("priceAlertModal");
-                closePopup?.dispatchEvent(new MouseEvent('click'))
     
             if (output === 'success') {
                 toast.success(`Successfully created price alert`, {
diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index 1a13ed53..20f41ee1 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -8,6 +8,8 @@
 
   export let apiURL;
   export let apiKey;
+
+  let dataLoaded = false; // Flag to track data loading
   
   let assetType = '';
 
@@ -21,13 +23,9 @@
   
   
   async function loadSearchData() {
-    
-    if($searchBarData?.length !== 0)
-    {
-      return
-    }
+    if ($searchBarData.length !== 0 || dataLoaded) return;
     else {
-  
+      dataLoaded = true;
        // make the GET request to the endpoint
        const response = await fetch(apiURL+'/searchbar-data', {
       method: 'GET',
@@ -37,9 +35,9 @@
       });
   
       $searchBarData = await response.json();
+      
     }
      
-  
   }
   
 
@@ -315,7 +313,7 @@ $: {
 
 
 
-<label 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-800 rounded-lg">
+<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-800 rounded-lg">
   <Search class="h-[20px] w-[20px]" />  
 </label>