prefetching data

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}
 

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`, {

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>