add lazy loading to FundamentalAnalysis component

src/lib/components/FundamentalAnalysis.svelte

@@ -1,9 +1,23 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker} from '$lib/store';
+  import { fundamentalAnalysisComponent, displayCompanyName, stockTicker, userRegion, getCache, setCache} from '$lib/store';
   import InfoModal from '$lib/components/InfoModal.svelte';
 
-    export let fundamentalAnalysisDict;
+  let fundamentalAnalysisDict = {};
+  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 deactivateContent = data?.user?.tier === 'Pro' ? false : true;
@@ -15,12 +29,55 @@
   let precision;
   let flowSentiment = 'n/a';
 
+const getFundamentalAnalysis = async (ticker) => {
+  // Get cached data for the specific tickerID
+  const cachedData = getCache(ticker, 'getFundamentalAnalysis');
+  if (cachedData) {
+    fundamentalAnalysisDict = cachedData;
+  } else {
+
+    const postData = {'ticker': ticker};
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + '/fundamental-predictor-analysis', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(postData)
+    });
+
+    fundamentalAnalysisDict = await response?.json();
+
+    // Cache the data for this specific tickerID with a specific name 'getFundamentalAnalysis'
+    setCache(ticker, fundamentalAnalysisDict, 'getFundamentalAnalysis');
+  }
+  if(Object?.keys(fundamentalAnalysisDict)?.length !== 0) {
+    $fundamentalAnalysisComponent = true;
+  }
+  else {
+    $fundamentalAnalysisComponent = false;
+  }
+};
+
+
 
 $: {
-  if($stockTicker && typeof window !== 'undefined' && Object?.keys(fundamentalAnalysisDict)?.length !== 0) {
+  if($stockTicker && typeof window !== 'undefined') {
+  
+    isLoaded = false;
+    const asyncFunctions = [
+      getFundamentalAnalysis($stockTicker)
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
             flowSentiment = fundamentalAnalysisDict?.sentiment;
             accuracy = fundamentalAnalysisDict?.accuracy;
             precision = fundamentalAnalysisDict?.precision;
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+    isLoaded = true;
     
   }
 }
@@ -43,6 +100,8 @@ $: {
                 />
             </div>
             
+            {#if isLoaded}
+
             {#if Object?.keys(fundamentalAnalysisDict)?.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">
@@ -157,6 +216,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/lib/store.ts

@@ -58,6 +58,7 @@ export const loginData = writable(({}));
 export const replyCommentClicked = writable(({}));
 export const editCommentClicked = writable(({}));
 
+export const fundamentalAnalysisComponent = writable(<boolean>(false));
 
 
 export const strategyId = writable(<string> (""));

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

@@ -137,8 +137,6 @@ export const load = async ({ params, locals, cookies}) => {
     const promises = [
     fetchData(apiURL,'/fair-price',params.tickerID),
     fetchData(apiURL,'/similar-stocks',params.tickerID),
-    //fetchData(apiURL,'/price-prediction',params.tickerID),
-    //fetchData(apiURL,'/trading-signals',params.tickerID),
     fetchData(apiURL,'/stockdeck',params.tickerID),
     fetchData(apiURL,'/stock-correlation',params.tickerID),
     fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
@@ -148,7 +146,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,'/fundamental-predictor-analysis',params.tickerID),
     fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/historical-price',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
@@ -160,8 +157,6 @@ export const load = async ({ params, locals, cookies}) => {
   const [
     getFairPrice,
     getSimilarStock,
-    //getPricePrediction,
-    //getTradingSignals,
     getStockDeck,
     getCorrelation,
     getAnalystRating,
@@ -171,7 +166,6 @@ export const load = async ({ params, locals, cookies}) => {
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
-    getFundamentalAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,
@@ -200,7 +194,6 @@ export const load = async ({ params, locals, cookies}) => {
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
-    getFundamentalAnalysis,
     getVaR,
     getHistoricalPrice,
     getOneDayPrice,

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

@@ -3,7 +3,7 @@
   import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
   
   import { TrackingModeExitMode } from 'lightweight-charts';
-  import {screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
+  import {screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, fundamentalAnalysisComponent,  userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
   import { onDestroy, onMount } from 'svelte';
   import StockKeyInformation from '$lib/components/StockKeyInformation.svelte';
   import BullBearSay from '$lib/components/BullBearSay.svelte';
@@ -41,7 +41,6 @@
     let marketMoods = {}
     let taRating = {};
     let varDict = {};
-    let fundamentalAnalysisDict = {};
     let communitySentiment = {};
 
     //============================================//
@@ -64,7 +63,6 @@
   let Correlation;
   let OptionsData;
   let WIIM;
-  let FundamentalAnalysis;
   let VaR;
 
   //let StockKeyInformation;
@@ -79,7 +77,6 @@
     }
     */
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    FundamentalAnalysis = (await import('$lib/components/FundamentalAnalysis.svelte')).default;
     VaR = (await import('$lib/components/VaR.svelte')).default;
     
     TARating = (await import('$lib/components/TARating.svelte')).default;
@@ -624,7 +621,6 @@ function changeChartType() {
       marketMoods = {};
       taRating = {};
       varDict={}
-      fundamentalAnalysisDict = {};
       communitySentiment = {}
       output = null;
   
@@ -638,7 +634,6 @@ function changeChartType() {
       marketMoods = data?.getBullBearSay;
       taRating = data?.getStockTARating;
       varDict = data?.getVaR;
-      fundamentalAnalysisDict = data?.getFundamentalAnalysis;
       communitySentiment = data?.getCommunitySentiment;
     
       similarstock = data?.getSimilarStock;
@@ -1214,11 +1209,13 @@ function changeChartType() {
                                 </div>
                                 </Lazy>
 
-                                {#if FundamentalAnalysis}
+                                <Lazy>
-                                  <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'}">
+                                  <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
-                                    <FundamentalAnalysis data={data} fundamentalAnalysisDict={fundamentalAnalysisDict}/>
+                                  {#await import('$lib/components/FundamentalAnalysis.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
                                 </div>
-                                {/if}
+                                </Lazy>
 
                                 <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">