lazy load options component

src/lib/components/OptionsData.svelte

@@ -1,15 +1,27 @@
 <script lang='ts'>
-  import { assetType, stockTicker, etfTicker, displayCompanyName} from "$lib/store";
+import { optionComponent, assetType, stockTicker, etfTicker, displayCompanyName, userRegion, getCache, setCache} from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+import { abbreviateNumber } from "$lib/utils";
-  import InfoModal from '$lib/components/InfoModal.svelte';
+import InfoModal from '$lib/components/InfoModal.svelte';
-  import { LayerCake, Html } from 'layercake';
+import { LayerCake, Html } from 'layercake';
-  import Circle from '$lib/components/Circle/Circle.html.svelte';
+import Circle from '$lib/components/Circle/Circle.html.svelte';
 
-  export let optionsDict = {};
+export let data;
-  export let data;
+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;
+  }
+});
+
+  let optionsDict = {};
+  
+  let isLoaded = false;
 
 function changeStatement(event)
 {
@@ -34,10 +46,42 @@ function allValuesZero(obj) {
 let checkIfNotZero:boolean;
 
 
-$: {
+
-  if (displayTimePeriod && Object?.keys(optionsDict)?.length !== 0)
+const getOptionsBubble = async (ticker) => {
-  {
+    // Get cached data for the specific tickerID
-    checkIfNotZero = false;
+    const cachedData = getCache(ticker, 'getOptionsBubble');
+    if (cachedData) {
+      optionsDict = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/options-bubble', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      optionsDict = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getOptionsBubble'
+      setCache(ticker, optionsDict, 'getOptionsBubble');
+    }
+
+    if(Object?.keys(optionsDict)?.length !== 0) {
+    $optionComponent = true;
+    }
+    else {
+      $optionComponent = false;
+    }
+
+};
+
+
+function prepareData() {
+  checkIfNotZero = false;
     rawData = [];
     try {
       dataset = optionsDict[displayTimePeriod]
@@ -58,9 +102,38 @@ $: {
     rawData.push({ 'contract': 'puts', value: putProportion });
     signal = callProportion >= putProportion ? 'Bullish' : 'Bearish';
     checkIfNotZero = allValuesZero(dataset);
+
+}
+
+
+$: {
+  if(($assetType === 'stock' ? $stockTicker : $etfTicker) && typeof window !== 'undefined') {
+    isLoaded = false;
+    
+    const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker;
+
+    const asyncFunctions = [
+      getOptionsBubble(ticker)
+      ];
+      Promise.all(asyncFunctions)
+          .then((results) => {
+            prepareData()
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+    isLoaded = true;
   }
 }
 
+$: {
+  if (displayTimePeriod && Object?.keys(optionsDict)?.length !== 0 && isLoaded === true)
+  {
+    prepareData()
+  }
+}
+
+
 </script>
     
 <section class="bg-[#0F0F0F] overflow-hidden text-white h-full w-full sm:mb-10">
@@ -82,15 +155,15 @@ $: {
               </div>
 
               {#if data?.user?.tier === 'Pro'}
-
+              {#if isLoaded}
               <div class="flex flex-row items-end justify-between">
                   <select class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5  bg-[#2A303C]" on:change={changeStatement}>
                       <option disabled>Choose a time period</option>
-                      <option disabled={deactivateContent} value="oneDay">
+                      <option value="oneDay">
-                        {!deactivateContent ? 'Last 24h' : 'Last 24h (Pro Only)'} 
+                        Last 24h
                       </option>
-                      <option disabled={deactivateContent} value="oneWeek">
+                      <option value="oneWeek">
-                        {!deactivateContent ? 'Last Week' : 'Last Week (Pro Only)'} 
+                        Last Week
                       </option>
                       <option value="oneMonth" selected>
                         Last Month
@@ -169,7 +242,16 @@ $: {
                 </div>
               </div>
               {/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}
             {:else}
             <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
                 <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>

src/lib/store.ts

@@ -71,6 +71,7 @@ export const varComponent = writable(<boolean>(false));
 export const sentimentComponent = writable(<boolean>(false));
 export const analystEstimateComponent = writable(<boolean>(false));
 export const marketMakerComponent = writable(<boolean>(false));
+export const optionComponent = writable(<boolean>(false));
 
 
 export const strategyId = writable(<string> (""));

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

@@ -112,7 +112,6 @@ const promises = [
     fetchData(apiURL,'/stock-dividend',params.tickerID),
     fetchData(apiURL,'/stock-quote',  params.tickerID),
     fetchData(apiURL,'/stock-rating', params.tickerID),
-    fetchData(apiURL,'/options-bubble',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
@@ -128,7 +127,6 @@ const promises = [
     getStockDividend,
     getStockQuote,
     getStockTARating,
-    getOptionsData,
     getWhyPriceMoved,
     getOneDayPrice,
     getUserWatchlist,
@@ -150,7 +148,6 @@ const promises = [
     getStockDividend,
     getStockQuote,
     getStockTARating,
-    getOptionsData,
     getWhyPriceMoved,
     getOneDayPrice,
     getUserWatchlist,

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

@@ -3,7 +3,7 @@
   import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
   
     import { TrackingModeExitMode } from 'lightweight-charts';
-    import {getCache, setCache, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, userRegion, numberOfUnreadNotification, displayCompanyName, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, etfTicker, isOpen,  isBeforeMarketOpen, isWeekend} from '$lib/store';
+    import {getCache, setCache, optionComponent, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, 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';
@@ -50,7 +50,6 @@
       let dividendList = [];
       let similarTicker = []
       let prePostData = {};
-      let optionsDict = {};
       let taRating = {};
 
       let previousClose = data?.getStockQuote?.previousClose;
@@ -77,7 +76,6 @@
     let Correlation;
     let CountrySegmentation;
     let SectorSegmentation;
-    let OptionsData;
     let WIIM;
     //let ETFKeyInformation;
     
@@ -85,19 +83,10 @@
   onMount(async() => {  
 
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    OptionsData = (await import('$lib/components/OptionsData.svelte')).default;
+    TARating = (await import('$lib/components/TARating.svelte')).default; 
-    TARating = (await import('$lib/components/TARating.svelte')).default;
-    //PricePredictionCard = (await import('$lib/components/PricePredictionCard.svelte')).default;
-    //TradingModel = (await import('$lib/components/TradingModel.svelte')).default;    
     Correlation = (await import('$lib/components/Correlation.svelte')).default;
     CountrySegmentation = (await import('$lib/components/CountrySegmentation.svelte')).default;
     SectorSegmentation = (await import('$lib/components/SectorSegmentation.svelte')).default;
-      //ShareHolders = (await import('$lib/components/ShareHolders.svelte')).default;
-      /*
-      if ($screenWidth < 640) {
-        ETFKeyInformation = (await import('$lib/components/ETFKeyInformation.svelte')).default;
-      }
-      */
   })
   
     
@@ -716,7 +705,6 @@ async function initializePrice() {
         topHoldingList = data?.getETFHoldings;
         dividendList = data?.getStockDividend;
         similarTicker = data?.getSimilarETFs;
-        optionsDict = data?.getOptionsData;
         previousClose = data?.getStockQuote?.previousClose
         taRating = data?.getStockTARating;
   
@@ -1300,12 +1288,13 @@ async function initializePrice() {
                                   </div>
                                   </Lazy>
                                   
-
+                                  <Lazy>
-                                  {#if OptionsData}
+                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {!$optionComponent ? 'hidden' : ''}">
-                                      <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">
+                                    {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
-                                        <OptionsData data={data} optionsDict={optionsDict}/>
+                                      <svelte:component this={Comp} data={data} />
-                                      </div>
+                                    {/await}
-                                  {/if}
+                                  </div>
+                                  </Lazy>
                                   
                 
   

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

@@ -142,7 +142,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     fetchData(apiURL,'/analyst-summary-rating',params.tickerID),
     fetchData(apiURL,'/stock-quote',params.tickerID),
     fetchData(apiURL,'/stock-rating',params.tickerID),
-    fetchData(apiURL,'/options-bubble',params.tickerID),
     fetchData(apiURL,'/bull-bear-say',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
@@ -160,7 +159,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     getAnalystRating,
     getStockQuote,
     getStockTARating,
-    getOptionsData,
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
@@ -184,7 +182,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     getAnalystRating,
     getStockQuote,
     getStockTARating,
-    getOptionsData,
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,

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 {getCache, setCache, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent,  userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
+  import {getCache, setCache, optionComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent,  userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
   import { onDestroy, onMount } from 'svelte';
   import BullBearSay from '$lib/components/BullBearSay.svelte';
   import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
@@ -32,7 +32,6 @@
     let prePostData = {};
     let similarstock = [];
     let topETFHolder = [];
-    let optionsDict = data?.getOptionsData ?? {};
     let previousClose = data?.getStockQuote?.previousClose;
     let marketMoods = {}
     let taRating = {};
@@ -56,7 +55,6 @@
   let TARating;
   let StockSplits;
   let Correlation;
-  let OptionsData;
   let WIIM;
 
 
@@ -67,7 +65,6 @@
     TARating = (await import('$lib/components/TARating.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;
 
   })
   
@@ -673,7 +670,6 @@ function changeChartType() {
       oneMonthPrice = [];
       oneYearPrice = [];
       threeYearPrice = [];
-      optionsDict = {};
       prePostData = {};
       marketMoods = {};
       taRating = {};
@@ -691,7 +687,6 @@ function changeChartType() {
     
       similarstock = data?.getSimilarStock;
       topETFHolder = data?.getTopETFHolder;
-      optionsDict = data?.getOptionsData;
       //previousClose = stockDeck?.at(0)?.previousClose;
     
       
@@ -1309,14 +1304,17 @@ function changeChartType() {
                                     {/await}
                                   </div>
                                   </Lazy>
-                                
-                                  {#if OptionsData}
-                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">
-                                      <OptionsData data={data} optionsDict={optionsDict}/>
-                                    </div>
-                                  {/if}
-                                
 
+                                  <Lazy>
+                                    <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
+                                  </div>
+                                  </Lazy>
+                                
+                                
+                                
 
                                  <!--Start RevenueSegmentation-->
                                   <Lazy>