Load PriceAnalysi component lazy

src/lib/components/PriceAnalysis.svelte

@@ -1,13 +1,27 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth} from '$lib/store';
+  import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth, userRegion, getCache, setCache} from '$lib/store';
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { Chart } from 'svelte-echarts'
 
+  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;
+    }
+  });
+
     import Lazy from 'svelte-lazy';
 
 
-    export let priceAnalysisDict;
+    let priceAnalysisDict = {};
     export let data;
 
     const modalContent = `
@@ -36,7 +50,6 @@ function getPlotOptions() {
     const predictionDate = priceAnalysisDict?.predictionDate;
     const upperBand = priceAnalysisDict?.upperBand;
     const lowerBand = priceAnalysisDict?.lowerBand?.map(value => value < 0 ? 0 : value);
-    console.log(lowerBand)
     const historicalPrice = priceAnalysisDict?.historicalPrice;
     //const meanPredictionPrice = priceAnalysisDict?.meanResult;
 
@@ -122,23 +135,54 @@ function getPlotOptions() {
 return option;
 }
 
-$: {
-  if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined' && Object?.keys(priceAnalysisDict)?.length !== 0) {
-    lastPrice = data?.getStockQuote?.price ?? "n/a";
-    oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);
 
+const getPriceAnalysis = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getPriceAnalysis');
+    if (cachedData) {
+      priceAnalysisDict = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/price-analysis', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      priceAnalysisDict = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getPriceAnalysis'
+      setCache(ticker, priceAnalysisDict, 'getPriceAnalysis');
+    }
+};
+
+
+
+$: {
+  if(($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined') {
+    isLoaded = false;
+    lastPrice = data?.getStockQuote?.price ?? "n/a";
+    const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
+
+    const asyncFunctions = [
+      getPriceAnalysis(ticker)
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
+            oneYearPricePrediction = priceAnalysisDict?.meanResult?.slice(-1)?.at(0);          
             mape = priceAnalysisDict?.mape;
             r2Score = priceAnalysisDict?.r2Score;
             priceSentiment = lastPrice < oneYearPricePrediction ? 'Bullish' : 'Bearish';
             optionsData = getPlotOptions()
-
+          })
-    /*
+          .catch((error) => {
-    const sample = trendList?.filter(item => item?.label === displayData)?.at(0);
+            console.error('An error occurred:', error);
-    priceSentiment = sample?.sentiment;
+          });
-    r2Score = sample?.r2Score;
+    isLoaded = true;
-    mape = sample?.mape;
-    */
-    
   }
 }
 
@@ -160,6 +204,9 @@ $: {
                 />
             </div>
     
+           
+            {#if isLoaded}
+
             {#if Object?.keys(priceAnalysisDict)?.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,7 +214,6 @@ $: {
                 </div>
             </div>
 
-
             <div class="w-full mt-5 mb-5 flex justify-start items-center">
                 <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
@@ -265,6 +311,16 @@ $: {
             
             {/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

@@ -86,7 +86,6 @@ export const load = async ({ params, locals}) => {
     fetchData(apiURL,'/stock-rating',params.tickerID),
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/trend-analysis',params.tickerID),
-    fetchData(apiURL,'/price-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/historical-price',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
@@ -100,7 +99,6 @@ export const load = async ({ params, locals}) => {
     getStockTARating,
     getSentimentAnalysis,
     getTrendAnalysis,
-    getPriceAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,
@@ -120,7 +118,6 @@ export const load = async ({ params, locals}) => {
     getStockTARating,
     getSentimentAnalysis,
     getTrendAnalysis,
-    getPriceAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,

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

@@ -6,6 +6,7 @@
   import {screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
   import { onDestroy, onMount, afterUpdate } from 'svelte';
   import CryptoKeyInformation from '$lib/components/CryptoKeyInformation.svelte';
+  import Lazy from '$lib/components/Lazy.svelte';
 
     
   const usRegion = ['cle1','iad1','pdx1','sfo1'];
@@ -34,7 +35,6 @@
     let varDict = {};
     let sentimentList = []
     let trendList = [];
-    let priceAnalysisDict = {};
 
     //============================================//
     
@@ -54,7 +54,6 @@
   let TARating;
   let SentimentAnalysis;
   let TrendAnalysis;
-  let PriceAnalysis;
   let VaR;
   //let StockKeyInformation;
 
@@ -66,7 +65,6 @@
 onMount(async() => {  
     SentimentAnalysis = (await import('$lib/components/SentimentAnalysis.svelte')).default;
     TrendAnalysis = (await import('$lib/components/TrendAnalysis.svelte')).default;
-    PriceAnalysis = (await import('$lib/components/PriceAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
 
     TARating = (await import('$lib/components/TARating.svelte')).default;
@@ -593,7 +591,6 @@ function changeChartType() {
       varDict={}
       sentimentList = [];
       trendList = [];
-      priceAnalysisDict = {};
       output = null;
   
   
@@ -603,7 +600,6 @@ function changeChartType() {
       sentimentList = data?.getSentimentAnalysis;
       trendList = data?.getTrendAnalysis;
       varDict = data?.getVaR;
-      priceAnalysisDict = data?.getPriceAnalysis;
 
       const asyncFunctions = [];
 
@@ -1115,11 +1111,13 @@ afterUpdate(async () => {
              
 
                                 
-                                {#if PriceAnalysis}
+                                <Lazy>
-                                <div class="w-full mt-16 sm:mt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(priceAnalysisDict)?.length !== 0  ? '' : 'hidden'}">
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                  <PriceAnalysis data={data} priceAnalysisDict={priceAnalysisDict}/>
+                                  {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
                                 </div>
-                                {/if}
+                                </Lazy>
 
                                 {#if TrendAnalysis}
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0  ? '' : 'hidden'}">

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

@@ -116,7 +116,6 @@ const promises = [
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/trend-analysis',params.tickerID),
-    fetchData(apiURL,'/price-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
@@ -135,7 +134,6 @@ const promises = [
     getWhyPriceMoved,
     getSentimentAnalysis,
     getTrendAnalysis,
-    getPriceAnalysis,
     getVaR,
     getUserWatchlist,
     getUserPortfolio,
@@ -160,7 +158,6 @@ const promises = [
     getWhyPriceMoved,
     getSentimentAnalysis,
     getTrendAnalysis,
-    getPriceAnalysis,
     getVaR,
     getUserWatchlist,
     getUserPortfolio,

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

@@ -6,6 +6,8 @@
     import {assetType, screenWidth, globalForm, userRegion, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen,  isBeforeMarketOpen, isWeekend} from '$lib/store';
     import { onDestroy, onMount } from 'svelte';    
     import ETFKeyInformation from '$lib/components/ETFKeyInformation.svelte';
+    import Lazy from '$lib/components/Lazy.svelte';
+
     export let data;
     export let form;
   
@@ -36,7 +38,6 @@
       let taRating = {};
       let varDict = {};
       let trendList = [];
-      let priceAnalysisDict = {};
 
       let previousClose = data?.getStockQuote?.previousClose;
       //============================================//
@@ -66,7 +67,6 @@
     let WIIM;
     let SentimentAnalysis;
     let TrendAnalysis;
-    let PriceAnalysis;
     let VaR;
     //let ETFKeyInformation;
     
@@ -76,7 +76,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;
     VaR = (await import('$lib/components/VaR.svelte')).default;
     OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
     TARating = (await import('$lib/components/TARating.svelte')).default;
@@ -699,7 +698,6 @@
         taRating = {};
         varDict = {};
         trendList = [];
-        priceAnalysisDict = {};
         output = null;
   
         
@@ -718,7 +716,6 @@
         previousClose = data?.getStockQuote?.previousClose
         taRating = data?.getStockTARating;
         trendList = data?.getTrendAnalysis;
-        priceAnalysisDict = data?.getPriceAnalysis;
         varDict = data?.getVaR;
   
         //shareholderList = data?.getShareHolders;
@@ -1288,11 +1285,14 @@
                                   </div>
                                   {/if}
 
-                                  {#if PriceAnalysis}
+                                  
-                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(priceAnalysisDict)?.length !== 0  ? '' : 'hidden'}">
+                                <Lazy>
-                                    <PriceAnalysis data={data} priceAnalysisDict={priceAnalysisDict}/>
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
+                                  {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
                                 </div>
-                                  {/if}
+                                </Lazy>
                                   
                                   {#if TrendAnalysis}
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0  ? '' : 'hidden'}">

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

@@ -153,7 +153,6 @@ export const load = async ({ params, locals, cookies}) => {
     fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
     fetchData(apiURL,'/sentiment-analysis',params.tickerID),
     fetchData(apiURL,'/trend-analysis',params.tickerID),
-    fetchData(apiURL,'/price-analysis',params.tickerID),
     fetchData(apiURL,'/fundamental-predictor-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/enterprise-values',params.tickerID),
@@ -183,7 +182,6 @@ export const load = async ({ params, locals, cookies}) => {
     getTopETFHolder,
     getSentimentAnalysis,
     getTrendAnalysis,
-    getPriceAnalysis,
     getFundamentalAnalysis,
     getVaR,
     getEnterPriseValues,
@@ -219,7 +217,6 @@ export const load = async ({ params, locals, cookies}) => {
     getTopETFHolder,
     getSentimentAnalysis,
     getTrendAnalysis,
-    getPriceAnalysis,
     getFundamentalAnalysis,
     getVaR,
     getEnterPriseValues,

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

@@ -9,6 +9,7 @@
   import StockKeyInformation from '$lib/components/StockKeyInformation.svelte';
   import BullBearSay from '$lib/components/BullBearSay.svelte';
   import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
+  import Lazy from '$lib/components/Lazy.svelte';
     
   const usRegion = ['cle1','iad1','pdx1','sfo1'];
   
@@ -47,7 +48,6 @@
     let enterpriseValues = [];
     let sentimentList = []
     let trendList = [];
-    let priceAnalysisDict = {};
     let fundamentalAnalysisDict = {};
     let communitySentiment = {};
 
@@ -96,7 +96,7 @@
     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;
+    //PriceAnalysis = (await import('$lib/components/PriceAnalysis.svelte')).default;
     FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
     Enterprise = (await import('$lib/components/Enterprise.svelte')).default;
@@ -652,7 +652,6 @@ function changeChartType() {
       enterpriseValues = []
       sentimentList = [];
       trendList = [];
-      priceAnalysisDict = {};
       fundamentalAnalysisDict = {};
       communitySentiment = {}
       output = null;
@@ -673,7 +672,6 @@ function changeChartType() {
       trendList = data?.getTrendAnalysis;
       varDict = data?.getVaR;
       enterpriseValues = data?.getEnterPriseValues;
-      priceAnalysisDict = data?.getPriceAnalysis;
       fundamentalAnalysisDict = data?.getFundamentalAnalysis;
       communitySentiment = data?.getCommunitySentiment;
     
@@ -1234,11 +1232,14 @@ function changeChartType() {
 
 
 
-                                {#if PriceAnalysis}
+                                <Lazy>
-                                <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(priceAnalysisDict)?.length !== 0  ? '' : 'hidden'}">
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                                  <PriceAnalysis data={data} priceAnalysisDict={priceAnalysisDict}/>
+                                  {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
                                 </div>
-                                {/if}
+                                </Lazy>
+
 
                                 {#if TrendAnalysis}
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {trendList?.length !== 0  ? '' : 'hidden'}">