Load TrendAnalysis component lazy

src/lib/components/TrendAnalysis.svelte

@@ -1,23 +1,37 @@
 
 <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';
     //import Chart from '$lib/components/Chart.svelte';
     //import Lazy from 'svelte-lazy';
 
-    export let trendList;
+  let trendList = [];
-    export let data;
+  let isLoaded = false;
+  const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
-    let deactivateContent = data?.user?.tier === 'Pro' ? false : true;
+  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 deactivateContent = data?.user?.tier === 'Pro' ? false : true;
 
 
-    //let showMore = false;
+  //let showMore = false;
-    //let oneMonthResult;
+  //let oneMonthResult;
-    let accuracy;
+  let accuracy;
-    let precision;
+  let precision;
-    let flowSentiment = 'n/a';
+  let flowSentiment = 'n/a';
-    let displayData = 'threeMonth';
+  let displayData = 'threeMonth';
-    let lastPrice = 'n/a';
+  let lastPrice = 'n/a';
 
 
 function changeStatement(event)
@@ -25,15 +39,52 @@ function changeStatement(event)
   displayData = event.target.value;
 }
 
+const getTrendAnalysis = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getTrendAnalysis');
+    if (cachedData) {
+      trendList = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/trend-analysis', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      trendList = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getTrendAnalysis'
+      setCache(ticker, trendList, 'getTrendAnalysis');
+    }
+};
+
+
 
 $: {
-  if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined' && trendList?.length !== 0) {
+  if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined') {
-    lastPrice = data?.getStockQuote?.price ?? "n/a";
+    isLoaded = false;
-    const sample = trendList?.filter(item => item?.label === displayData)?.at(0);
+    const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
-    flowSentiment = sample?.sentiment;
+
-    accuracy = sample?.accuracy;
+    const asyncFunctions = [
-    precision = sample?.precision;
+      getTrendAnalysis(ticker)
-    
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
+            lastPrice = data?.getStockQuote?.price ?? "n/a";
+            const sample = trendList?.filter(item => item?.label === displayData)?.at(0);
+            flowSentiment = sample?.sentiment;
+            accuracy = sample?.accuracy;
+            precision = sample?.precision;
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+    isLoaded = true;
   }
 }
 
@@ -54,7 +105,8 @@ $: {
                   id={"trendAnalysisInfo"}
                 />
             </div>
-    
+            
+            {#if isLoaded}
             {#if trendList?.length !== 0}
             <div class="w-full flex flex-col items-start">
                 <div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
@@ -167,6 +219,16 @@ $: {
             </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>

src/routes/crypto/[tickerID]/+layout.server.ts

@@ -85,7 +85,6 @@ export const load = async ({ params, locals}) => {
     fetchData(apiURL,'/stock-quote',params.tickerID),
     fetchData(apiURL,'/stock-rating',params.tickerID),
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
-    fetchData(apiURL,'/trend-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/historical-price',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
@@ -98,7 +97,6 @@ export const load = async ({ params, locals}) => {
     getStockQuote,
     getStockTARating,
     getSentimentAnalysis,
-    getTrendAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,
@@ -117,7 +115,6 @@ export const load = async ({ params, locals}) => {
     getStockQuote,
     getStockTARating,
     getSentimentAnalysis,
-    getTrendAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,

src/routes/crypto/[tickerID]/+page.svelte

@@ -34,7 +34,6 @@
     let taRating = {};
     let varDict = {};
     let sentimentList = []
-    let trendList = [];
 
     //============================================//
     
@@ -53,7 +52,6 @@
   
   let TARating;
   let SentimentAnalysis;
-  let TrendAnalysis;
   let VaR;
   //let StockKeyInformation;
 
@@ -64,7 +62,6 @@
 
 onMount(async() => {  
     SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
-    TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
 
     TARating = (await import('$lib/components/TARating.svelte')).default;
@@ -590,7 +587,6 @@ function changeChartType() {
       taRating = {};
       varDict={}
       sentimentList = [];
-      trendList = [];
       output = null;
   
   
@@ -598,7 +594,6 @@ function changeChartType() {
       previousClose = data?.getStockQuote?.previousClose;
       taRating = data?.getStockTARating;
       sentimentList = data?.getSentimentAnalysis;
-      trendList = data?.getTrendAnalysis;
       varDict = data?.getVaR;
 
       const asyncFunctions = [];
@@ -1119,11 +1114,13 @@ afterUpdate(async () => {
                                 </div>
                                 </Lazy>
 
-                                {#if TrendAnalysis}
+                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0  ? '' : 'hidden'}">
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                    <TrendAnalysis data={data} trendList={trendList}/>
+                                  {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
-                                  </div>
+                                    <svelte:component this={Comp} data={data} />
-                                {/if}
+                                  {/await}
+                                </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'}">

src/routes/etf/[tickerID]/+layout.server.ts

@@ -115,7 +115,6 @@ const promises = [
     fetchData(apiURL,'/options-bubble',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
-    fetchData(apiURL,'/trend-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
@@ -133,7 +132,6 @@ const promises = [
     getOptionsData,
     getWhyPriceMoved,
     getSentimentAnalysis,
-    getTrendAnalysis,
     getVaR,
     getUserWatchlist,
     getUserPortfolio,
@@ -157,7 +155,6 @@ const promises = [
     getOptionsData,
     getWhyPriceMoved,
     getSentimentAnalysis,
-    getTrendAnalysis,
     getVaR,
     getUserWatchlist,
     getUserPortfolio,

src/routes/etf/[tickerID]/+page.svelte

@@ -37,7 +37,6 @@
       let optionsDict = {};
       let taRating = {};
       let varDict = {};
-      let trendList = [];
 
       let previousClose = data?.getStockQuote?.previousClose;
       //============================================//
@@ -66,7 +65,6 @@
     let OptionsData;
     let WIIM;
     let SentimentAnalysis;
-    let TrendAnalysis;
     let VaR;
     //let ETFKeyInformation;
     
@@ -75,7 +73,6 @@
 
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
     SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
-    TrendAnalysis = (await import('$lib/components/TrendAnalysis.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;
@@ -697,7 +694,6 @@
         prePostData = {};
         taRating = {};
         varDict = {};
-        trendList = [];
         output = null;
   
         
@@ -715,7 +711,6 @@
         optionsDict = data?.getOptionsData;
         previousClose = data?.getStockQuote?.previousClose
         taRating = data?.getStockTARating;
-        trendList = data?.getTrendAnalysis;
         varDict = data?.getVaR;
   
         //shareholderList = data?.getShareHolders;
@@ -1294,11 +1289,13 @@
                                 </div>
                                 </Lazy>
                                   
-                                  {#if TrendAnalysis}
+                                <Lazy>
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0  ? '' : 'hidden'}">
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                    <TrendAnalysis data={data} trendList={trendList}/>
+                                  {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
-                                  </div>
+                                    <svelte:component this={Comp} data={data} />
-                                  {/if}
+                                  {/await}
+                                </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'}">

src/routes/stocks/[tickerID]/+layout.server.ts

@@ -152,7 +152,6 @@ export const load = async ({ params, locals, cookies}) => {
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
-    fetchData(apiURL,'/trend-analysis',params.tickerID),
     fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/enterprise-values',params.tickerID),
@@ -181,7 +180,6 @@ export const load = async ({ params, locals, cookies}) => {
     getWhyPriceMoved,
     getTopETFHolder,
     getSentimentAnalysis,
-    getTrendAnalysis,
     getFundamentalAnalysis,
     getVaR,
     getEnterPriseValues,
@@ -216,7 +214,6 @@ export const load = async ({ params, locals, cookies}) => {
     getWhyPriceMoved,
     getTopETFHolder,
     getSentimentAnalysis,
-    getTrendAnalysis,
     getFundamentalAnalysis,
     getVaR,
     getEnterPriseValues,

src/routes/stocks/[tickerID]/+page.svelte

@@ -47,7 +47,6 @@
     let varDict = {};
     let enterpriseValues = [];
     let sentimentList = []
-    let trendList = [];
     let fundamentalAnalysisDict = {};
     let communitySentiment = {};
 
@@ -75,7 +74,6 @@
   let OptionsData;
   let WIIM;
   let SentimentAnalysis;
-  let TrendAnalysis;
   let PriceAnalysis;
   let FundamentalAnalysis;
   let VaR;
@@ -95,7 +93,6 @@
     */
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
     SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
-    TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
     //PriceAnalysis = (await import('$lib/components/PriceAnalysis.svelte')).default;
     FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
@@ -651,7 +648,6 @@ function changeChartType() {
       varDict={}
       enterpriseValues = []
       sentimentList = [];
-      trendList = [];
       fundamentalAnalysisDict = {};
       communitySentiment = {}
       output = null;
@@ -669,7 +665,6 @@ function changeChartType() {
       marketMoods = data?.getBullBearSay;
       taRating = data?.getStockTARating;
       sentimentList = data?.getSentimentAnalysis;
-      trendList = data?.getTrendAnalysis;
       varDict = data?.getVaR;
       enterpriseValues = data?.getEnterPriseValues;
       fundamentalAnalysisDict = data?.getFundamentalAnalysis;
@@ -1240,12 +1235,13 @@ function changeChartType() {
                                 </div>
                                 </Lazy>
 
-
+                                <Lazy>
-                                {#if TrendAnalysis}
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0  ? '' : 'hidden'}">
+                                  {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
-                                    <TrendAnalysis data={data} trendList={trendList}/>
+                                    <svelte:component this={Comp} data={data} />
-                                  </div>
+                                  {/await}
-                                {/if}
+                                </div>
+                                </Lazy>
 
                                 {#if FundamentalAnalysis}
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(fundamentalAnalysisDict)?.length !== 0  ? '' : 'hidden'}">