reduce initial load time

src/lib/components/Searchbar.svelte

@@ -26,6 +26,29 @@
   let inputElement;
   
   
+  async function loadSearchData() {
+    
+    if($searchBarData?.length !== 0)
+    {
+      return
+    }
+    else {
+  
+       // make the GET request to the endpoint
+       const response = await fetch(apiURL+'/searchbar-data', {
+      method: 'GET',
+      headers: {
+          'Content-Type': 'application/json'
+      },
+      });
+  
+      $searchBarData = await response.json();
+    }
+     
+  
+  }
+  
+
   function popularTicker(state, assetType) {
     searchOpen = false;
 
@@ -294,7 +317,7 @@ $: {
 
 
 
-<label for="searchBarModal"
+<label on:click={loadSearchData} for="searchBarModal"
 class="cursor-pointer w-8 h-8  flex items-center justify-center bg-[#3C74D4] rounded-full">
 <span class="sr-only">Search</span>
     <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -497,7 +520,11 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-[#3C74D4] rou
     </div>
     {:else}
     <div class="flex justify-center items-center m-auto mt-4 py-20">
-      <span class="loading loading-lg loading-spinner text-success"></span>
+      <div class="relative">
+        <label class="bg-[#202020] 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"></span>
+        </label>
+    </div>  
     </div>
     {/if}
         

src/lib/workers/notificationWorker.ts

@@ -0,0 +1,42 @@
+// lib/workers/test.ts
+
+async function loadNotifications(fastifyURL:string, userId:string) {
+
+    const postData = {'userId': userId};
+
+    const response = await fetch(fastifyURL+'/get-notifications', {
+        method: 'POST',
+        headers: {
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(postData)
+    });
+
+    const output  = (await response.json())?.items;
+    return output
+}
+
+  onmessage = async (event: MessageEvent) => {
+    const data = event.data?.message;
+    const fastifyURL = data?.fastifyURL;
+    const userId = data?.userId;
+    try {
+    
+        const [notificationList] = await Promise.all([
+            loadNotifications(fastifyURL, userId),
+          ]);
+
+    const numberOfUnreadNotification = notificationList?.length
+    const hasUnreadElement = notificationList?.length !== 0 ? true : false;
+
+    const output = {notificationList, hasUnreadElement, numberOfUnreadNotification}
+    
+    postMessage({ message: 'success', output});
+    } catch(e) {
+      postMessage({ message: 'error', e});
+    }
+    // Sending data back to the main thread
+    //postMessage({ message: 'Data received in the worker', ticker, apiURL });
+  };
+  
+  export {};

src/lib/workers/searchNotificationWorker.ts

@@ -1,67 +0,0 @@
-// lib/workers/test.ts
-
-async function loadSearchData(apiURL:string) {
-    try {
-
-      const response = await fetch(apiURL + '/searchbar-data', {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-  
-      const output = await response.json();
-  
-      // Set worker status to finished and send chart data
-      return output;
-
-    } catch (error) {
-      // Set worker status to idle and send error message
-      return [];
-    }
-  }
-  
-async function loadNotifications(fastifyURL:string, userId:string) {
-
-    const postData = {'userId': userId};
-
-    const response = await fetch(fastifyURL+'/get-notifications', {
-        method: 'POST',
-        headers: {
-        'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(postData)
-    });
-
-    const output  = (await response.json())?.items;
-    return output
-}
-
-  onmessage = async (event: MessageEvent) => {
-    const data = event.data?.message;
-    const apiURL = data?.apiURL;
-    const fastifyURL = data?.fastifyURL;
-    const userId = data?.userId;
-    //console.log(ticker, apiURL);
-    try {
-    
-        const [searchBarData, notificationList] = await Promise.all([
-            loadSearchData(apiURL),
-            loadNotifications(fastifyURL, userId),
-          ]);
-
-    const unreadNotificationList = notificationList?.filter(item => item?.readed === false);
-    const hasUnreadElement = notificationList?.some(item => item?.readed === false);
-    const numberOfUnreadNotification = notificationList?.filter(item => item?.readed === false)?.length;
-
-    const output = {searchBarData, notificationList, hasUnreadElement, numberOfUnreadNotification, unreadNotificationList}
-    
-    postMessage({ message: 'success', output});
-    } catch(e) {
-      postMessage({ message: 'error', e});
-    }
-    // Sending data back to the main thread
-    //postMessage({ message: 'Data received in the worker', ticker, apiURL });
-  };
-  
-  export {};

src/routes/+layout.svelte

@@ -191,28 +191,29 @@ let syncWorker: Worker | undefined = undefined;
 // Handling messages from the worker
 const handleMessage = (event) => {
     const output = event.data?.output;
-    $searchBarData = output?.searchBarData;
     notificationList = output?.notificationList
     hasUnreadElement = output?.hasUnreadElement;
-    const unreadNotificationList = output?.unreadNotificationList;
+    //const unreadNotificationList = output?.unreadNotificationList;
     $numberOfUnreadNotification = output?.numberOfUnreadNotification;
     //pushNotification()
 
 };
 
+/*
 const handleTwitchMessage = (event) => {
     const output = event.data?.output;
    $twitchStatus = output?.twitchStatus;
 };
+*/
 
 
 const loadWorker = async () => {
 
   if ('serviceWorker' in navigator) {
-  const SyncWorker = await import('$lib/workers/searchNotificationWorker?worker');
+  const SyncWorker = await import('$lib/workers/notificationWorker?worker');
   syncWorker = new SyncWorker.default();
 
-  syncWorker.postMessage({ message: {'apiURL': apiURL, 'fastifyURL': fastifyURL, 'userId': data?.user?.id }});
+  syncWorker.postMessage({ message: {'fastifyURL': fastifyURL, 'userId': data?.user?.id }});
   syncWorker.onmessage = handleMessage;
   } else {
     // Fallback logic here
@@ -225,23 +226,8 @@ const loadWorker = async () => {
 async function fallbackWorker() {
   // Implement fallback logic here, e.g., using timers or other techniques
   console.log('Fallback worker activated');
-  try {
-
-  const response = await fetch(apiURL + '/searchbar-data', {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  $searchBarData  = await response.json();
-  } catch (error) {
-  // Set worker status to idle and send error message
-  $searchBarData = [];
-  }
 
   const postData = {'userId': data?.user?.id};
-
     const response = await fetch(fastifyURL+'/get-notifications', {
         method: 'POST',
         headers: {
@@ -251,9 +237,8 @@ async function fallbackWorker() {
     });
 
     notificationList  = (await response.json())?.items;
-    hasUnreadElement = notificationList?.some(item => item?.readed === false);
+    hasUnreadElement = notificationList?.length !== 0 ? true : false;
-    $numberOfUnreadNotification = notificationList?.filter(item => item?.readed === false)?.length;
+    $numberOfUnreadNotification = notificationList?.length
-
 
 }