From b6e3c4f423700226b99d2f9e62b70a68e4d1e075 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 7 Jun 2024 14:52:44 +0200
Subject: [PATCH] add lazy loading to SentimentAnalysis component

---
 src/lib/components/SentimentAnalysis.svelte   | 75 +++++++++++++++++--
 .../crypto/[tickerID]/+layout.server.ts       |  3 -
 src/routes/crypto/[tickerID]/+page.svelte     | 18 ++---
 src/routes/etf/[tickerID]/+layout.server.ts   |  3 -
 src/routes/etf/[tickerID]/+page.svelte        | 12 +--
 .../stocks/[tickerID]/+layout.server.ts       |  3 -
 src/routes/stocks/[tickerID]/+page.svelte     | 17 ++---
 7 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/SentimentAnalysis.svelte b/src/lib/components/SentimentAnalysis.svelte
index b793a807..831f92e4 100644
--- a/src/lib/components/SentimentAnalysis.svelte
+++ b/src/lib/components/SentimentAnalysis.svelte
@@ -1,9 +1,22 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
+    import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
 
-    export let sentimentList = [];
+    let sentimentList = [];
+    let isLoaded = false;
+    const usRegion = ['cle1','iad1','pdx1','sfo1'];
+
+    let apiURL;
+
+    userRegion.subscribe(value => {
+
+        if (usRegion.includes(value)) {
+        apiURL = import.meta.env.VITE_USEAST_API_URL;
+        } else {
+        apiURL = import.meta.env.VITE_EU_API_URL;
+        }
+    });
     export let data;
     
     let oneMonthResult;
@@ -25,11 +38,50 @@
         '10': '-mt-[200px]',
     }
 
+const getSentimentAnalysis = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getSentimentAnalysis');
+    if (cachedData) {
+      sentimentList = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/sentiment-analysis', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      sentimentList = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis'
+      setCache(ticker, sentimentList, 'getSentimentAnalysis');
+    }
+};
+
+
+
 $: {
-    if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined' && sentimentList?.length !== 0) {
-        oneMonthResult = sentimentList?.at(1)?.value;
-        outlook = oneMonthResult > 5 ? 'Positive' : oneMonthResult < 5 ? 'Negative' : 'Neutral';
-        oneYearResult = sentimentList?.at(-1)?.value;
+    if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined') {
+        
+        isLoaded= false;
+        const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
+        const asyncFunctions = [
+        getSentimentAnalysis(ticker)
+        ];
+        Promise.all(asyncFunctions)
+            .then((results) => {
+                oneMonthResult = sentimentList?.at(1)?.value;
+                outlook = oneMonthResult > 5 ? 'Positive' : oneMonthResult < 5 ? 'Negative' : 'Neutral';
+                oneYearResult = sentimentList?.at(-1)?.value;
+            })
+            .catch((error) => {
+                console.error('An error occurred:', error);
+            });
+        isLoaded = true;
     }
 }
 </script>
@@ -49,7 +101,7 @@ $: {
                   id={"sentimentAnalysisInfo"}
                 />
             </div>
-    
+            {#if isLoaded}
             {#if sentimentList?.length !== 0}
             
 
@@ -178,6 +230,15 @@ $: {
             </h2>
             
             {/if}
+            {:else}
+          <div class="flex justify-center items-center h-80">
+            <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}
     
         </main>
     </section>
diff --git a/src/routes/crypto/[tickerID]/+layout.server.ts b/src/routes/crypto/[tickerID]/+layout.server.ts
index ec4daa8f..2e1c38c8 100644
--- a/src/routes/crypto/[tickerID]/+layout.server.ts
+++ b/src/routes/crypto/[tickerID]/+layout.server.ts
@@ -84,7 +84,6 @@ export const load = async ({ params, locals}) => {
     fetchData(apiURL,'/crypto-profile',params.tickerID),
     fetchData(apiURL,'/stock-quote',params.tickerID),
     fetchData(apiURL,'/stock-rating',params.tickerID),
-    fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/historical-price',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
@@ -96,7 +95,6 @@ export const load = async ({ params, locals}) => {
     getCryptoProfile,
     getStockQuote,
     getStockTARating,
-    getSentimentAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,
@@ -114,7 +112,6 @@ export const load = async ({ params, locals}) => {
     getCryptoProfile,
     getStockQuote,
     getStockTARating,
-    getSentimentAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index a01f817f..3ad206f6 100644
--- a/src/routes/crypto/[tickerID]/+page.svelte
+++ b/src/routes/crypto/[tickerID]/+page.svelte
@@ -33,7 +33,6 @@
     let previousClose = data?.getStockQuote?.previousClose;
     let taRating = {};
     let varDict = {};
-    let sentimentList = []
 
     //============================================//
     
@@ -51,7 +50,6 @@
   
   
   let TARating;
-  let SentimentAnalysis;
   let VaR;
   //let StockKeyInformation;
 
@@ -61,7 +59,6 @@
 
 
 onMount(async() => {  
-    SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
 
     TARating = (await import('$lib/components/TARating.svelte')).default;
@@ -586,14 +583,12 @@ function changeChartType() {
       pastPriceList = [];
       taRating = {};
       varDict={}
-      sentimentList = [];
       output = null;
   
   
       cryptoProfile = data?.getCryptoProfile;
       previousClose = data?.getStockQuote?.previousClose;
       taRating = data?.getStockTARating;
-      sentimentList = data?.getSentimentAnalysis;
       varDict = data?.getVaR;
 
       const asyncFunctions = [];
@@ -1122,12 +1117,13 @@ afterUpdate(async () => {
                                 </div>
                                 </Lazy>
 
-                                {#if SentimentAnalysis}
-                                  <div class="w-full mt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {sentimentList?.length !== 0  ? '' : 'hidden'}">
-                                    <SentimentAnalysis data={data} sentimentList={sentimentList}/>
-                                  </div>
-                                {/if}
-
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+                                  {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
                                 {#if VaR}
                                 <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0  ? '' : 'hidden'}">
                                   <VaR data={data} varDict={varDict}/>
diff --git a/src/routes/etf/[tickerID]/+layout.server.ts b/src/routes/etf/[tickerID]/+layout.server.ts
index 41098e83..5b4222b7 100644
--- a/src/routes/etf/[tickerID]/+layout.server.ts
+++ b/src/routes/etf/[tickerID]/+layout.server.ts
@@ -114,7 +114,6 @@ const promises = [
     fetchData(apiURL,'/stock-rating', params.tickerID),
     fetchData(apiURL,'/options-bubble',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
-    fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
@@ -131,7 +130,6 @@ const promises = [
     getStockTARating,
     getOptionsData,
     getWhyPriceMoved,
-    getSentimentAnalysis,
     getVaR,
     getUserWatchlist,
     getUserPortfolio,
@@ -154,7 +152,6 @@ const promises = [
     getStockTARating,
     getOptionsData,
     getWhyPriceMoved,
-    getSentimentAnalysis,
     getVaR,
     getUserWatchlist,
     getUserPortfolio,
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 6bf53513..b2ee1ce2 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -64,7 +64,6 @@
     let SectorSegmentation;
     let OptionsData;
     let WIIM;
-    let SentimentAnalysis;
     let VaR;
     //let ETFKeyInformation;
     
@@ -72,7 +71,6 @@
   onMount(async() => {  
 
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
     OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
     TARating = (await import('$lib/components/TARating.svelte')).default;
@@ -1296,11 +1294,13 @@
                                 </div>
                                 </Lazy>
 
-                                  {#if SentimentAnalysis}
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getSentimentAnalysis?.length !== 0  ? '' : 'hidden'}">
-                                    <SentimentAnalysis data={data} sentimentList={data?.getSentimentAnalysis}/>
+                                  <Lazy>
+                                    <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+                                    {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
                                   </div>
-                                  {/if}
+                                  </Lazy>
 
                                   {#if VaR}
                                   <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0  ? '' : 'hidden'}">
diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index 1a9c6848..ba34bb3e 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -148,7 +148,6 @@ export const load = async ({ params, locals, cookies}) => {
     fetchData(apiURL,'/bull-bear-say',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
-    fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/historical-price',params.tickerID),
@@ -172,7 +171,6 @@ export const load = async ({ params, locals, cookies}) => {
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
-    getSentimentAnalysis,
     getFundamentalAnalysis,
     getVaR,
     getHistoricalPrice,
@@ -202,7 +200,6 @@ export const load = async ({ params, locals, cookies}) => {
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
-    getSentimentAnalysis,
     getFundamentalAnalysis,
     getVaR,
     getHistoricalPrice,
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 0899248a..c8940d40 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -41,7 +41,6 @@
     let marketMoods = {}
     let taRating = {};
     let varDict = {};
-    let sentimentList = []
     let fundamentalAnalysisDict = {};
     let communitySentiment = {};
 
@@ -65,7 +64,6 @@
   let Correlation;
   let OptionsData;
   let WIIM;
-  let SentimentAnalysis;
   let FundamentalAnalysis;
   let VaR;
 
@@ -81,7 +79,6 @@
     }
     */
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
     FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
     
@@ -627,7 +624,6 @@ function changeChartType() {
       marketMoods = {};
       taRating = {};
       varDict={}
-      sentimentList = [];
       fundamentalAnalysisDict = {};
       communitySentiment = {}
       output = null;
@@ -641,7 +637,6 @@ function changeChartType() {
       previousClose = data?.getStockQuote?.previousClose;
       marketMoods = data?.getBullBearSay;
       taRating = data?.getStockTARating;
-      sentimentList = data?.getSentimentAnalysis;
       varDict = data?.getVaR;
       fundamentalAnalysisDict = data?.getFundamentalAnalysis;
       communitySentiment = data?.getCommunitySentiment;
@@ -1225,11 +1220,13 @@ function changeChartType() {
                                   </div>
                                 {/if}
 
-                                {#if SentimentAnalysis}
-                                  <div class="w-full mt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {sentimentList?.length !== 0  ? '' : 'hidden'}">
-                                    <SentimentAnalysis data={data} sentimentList={sentimentList}/>
-                                  </div>
-                                {/if}
+                                <Lazy>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+                                  {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
+                                </div>
+                                </Lazy>
 
                                 {#if VaR}
                                 <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0  ? '' : 'hidden'}">