add lazy loading to RevenueSegmentation component

src/lib/components/RevenueSegmentation.svelte

@@ -1,5 +1,5 @@
 <script lang='ts'>
-    import { stockTicker, screenWidth} from '$lib/store';
+    import { stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import { abbreviateNumber, formatString } from '$lib/utils';
     import Sankey from '$lib/components/Sankey.svelte';
     import { LayerCake, Svg } from 'layercake';
@@ -7,10 +7,22 @@
 
     import InfoModal from '$lib/components/InfoModal.svelte';
     
-    export let revenueSegmentation;
+    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;
+        }
+    });
 
 
+    let revenueSegmentation = [];
     
     let data = [];
     let geographicList = [];
@@ -85,25 +97,8 @@
     
             geographicList?.sort((a, b) => b?.value - a?.value);
         }
-    }
 
 
-    
-        
-        
-    $: {
-        if($stockTicker &&  typeof window !== 'undefined' && typeof revenueSegmentation !== 'undefined' && revenueSegmentation?.length !== 0)
-        {   
-            showFullStats = false;
-            data = [];
-            geographicList = [];
-            totalProductRevenue = 0;
-            totalGeographicRevenue = 0;
-    
-            
-            
-            prepareData(revenueSegmentation)
-            
         geographicList?.forEach(item => {
                 if (item?.name === "TAIWAN, PROVINCE OF CHINA") {
                     item.name = "TAIWAN";
@@ -113,10 +108,10 @@
                 }
             });
 
-            geographicList = geographicList.map(item => {
+            geographicList = geographicList?.map(item => {
                 return {
                     ...item,
-                    name: item.name
+                    name: item?.name
                         ?.replace("Video Game Brands - ", "")
                 };
             });
@@ -136,7 +131,63 @@
             geographicList = [...geographicList];
 
     }
+    
+    
+    
+const getRevenueSegmentation = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getRevenueSegmentation');
+    if (cachedData) {
+      revenueSegmentation = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/revenue-segmentation', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      revenueSegmentation = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getRevenueSegmentation'
+      setCache(ticker, revenueSegmentation, 'getRevenueSegmentation');
     }
+};
+    
+        
+
+
+$: {
+  if($stockTicker &&  typeof window !== 'undefined') {
+    isLoaded = false;
+    showFullStats = false;
+    data = [];
+    geographicList = [];
+    totalProductRevenue = 0;
+    totalGeographicRevenue = 0;
+    const ticker = $stockTicker;
+
+    const asyncFunctions = [
+      getRevenueSegmentation(ticker)
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
+            prepareData(revenueSegmentation)
+        
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+    isLoaded = true;
+  }
+}
+
+
+
 let showFullStats = false;
 let charNumber = 40;
 
@@ -161,9 +212,6 @@ $: {
             <main class="w-full">
                 <div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
                                 
-            
-                            {#if Object?.keys(data)?.length !== 0  && totalProductRevenue !== 0}
-                        
                     <div class="flex flex-row items-center">
                         <label for="revenueProductSegmentationInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
                           Revenue Breakdown
@@ -174,6 +222,10 @@ $: {
                           id={"revenueProductSegmentationInfo"}
                         />
                     </div>
+
+                    {#if isLoaded}
+                        {#if Object?.keys(data)?.length !== 0  && totalProductRevenue !== 0}
+                        
                             <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
                                 <div class="text-white  text-md mt-3 w-full mb-5">
                                     Based on the latest earnings report
@@ -269,6 +321,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}
+                            
                         </div>
                     </main>
                     </div>

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

@@ -1314,6 +1314,15 @@
                                       </div>
                                   {/if}
                                   
+                                  <!--Start Shareholders-->
+                                  <Lazy>
+                                    <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5">
+                                    {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} />
+                                    {/await}
+                                    </div>
+                                    </Lazy>
+                                    <!--End Shareholders-->
   
                                     <!--End Price Prediction Model-->
     

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

@@ -140,7 +140,6 @@ export const load = async ({ params, locals, cookies}) => {
     //fetchData(apiURL,'/price-prediction',params.tickerID),
     //fetchData(apiURL,'/trading-signals',params.tickerID),
     fetchData(apiURL,'/stockdeck',params.tickerID),
-    fetchData(apiURL,'/revenue-segmentation',params.tickerID),
     fetchData(apiURL,'/stock-correlation',params.tickerID),
     fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
     fetchData(apiURL,'/analyst-estimate',params.tickerID),
@@ -166,7 +165,6 @@ export const load = async ({ params, locals, cookies}) => {
     //getPricePrediction,
     //getTradingSignals,
     getStockDeck,
-    getRevenueSegmentation,
     getCorrelation,
     getAnalystRating,
     getAnalystEstimate,
@@ -198,7 +196,6 @@ export const load = async ({ params, locals, cookies}) => {
     //getPricePrediction,
     //getTradingSignals,
     getStockDeck,
-    getRevenueSegmentation,
     getCorrelation,
     getAnalystRating,
     getAnalystEstimate,

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

@@ -33,7 +33,6 @@
     let stockDeck = data?.getStockDeck ?? [];
     let analystEstimateList = data?.getAnalystEstimate ?? []
     let fairPrice = data?.getFairPrice ?? [];
-    let revenueSegmentation = data?.getRevenueSegmentation ?? [];
     let correlationList = data?.getCorrelation?.correlation ?? [];
     let modelStats = data?.getTradingSignals ?? {};
     let prePostData = {};
@@ -64,7 +63,6 @@
   
   
   let TARating;
-  let RevenueSegmentation;
   let StockSplits;
   let Correlation;
   let OptionsData;
@@ -91,7 +89,6 @@
     VaR = (await import('$lib/components/VaR.svelte')).default;
     
     TARating = (await import('$lib/components/TARating.svelte')).default;
-    RevenueSegmentation = (await import('$lib/components/RevenueSegmentation.svelte')).default;
     StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
     Correlation = (await import('$lib/components/Correlation.svelte')).default;
     OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
@@ -643,7 +640,6 @@ function changeChartType() {
       pricePrediction = data?.getPricePrediction;
       modelStats = data?.getTradingSignals;
       stockDeck = data?.getStockDeck;
-      revenueSegmentation = data?.getRevenueSegmentation;
       correlationList = data?.getCorrelation?.correlation;
       analystEstimateList = data?.getAnalystEstimate;
       previousClose = data?.getStockQuote?.previousClose;
@@ -1272,13 +1268,13 @@ function changeChartType() {
 
 
                                  <!--Start RevenueSegmentation-->
-                                  <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {revenueSegmentation?.at(0)?.length !== 0 ? '' : 'hidden'}">
+                                  <Lazy>
-                                    {#if RevenueSegmentation}
+                                    <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto">
-                                      <RevenueSegmentation
+                                    {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
-                                      revenueSegmentation = {revenueSegmentation}
+                                      <svelte:component this={Comp} />
-                                      />
+                                    {/await}
-                                    {/if}
                                     </div>
+                                    </Lazy>
                                <!--End RevenueSegmentation-->