AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reduce initial load time

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-13 14:17:46 +02:00
parent a03927bf5a
commit 8310803118
4 changed files with 78 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/lib/components/Searchbar.svelte
View File

@ -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}

42
src/lib/workers/notificationWorker.ts Normal file
View File

@ -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 {};

67
src/lib/workers/searchNotificationWorker.ts
View File

@ -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 {};

29
src/routes/+layout.svelte
View File

@ -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);
$numberOfUnreadNotification = notificationList?.filter(item => item?.readed === false)?.length;
hasUnreadElement = notificationList?.length !== 0 ? true : false;
$numberOfUnreadNotification = notificationList?.length
}