From ddeed423068092536acbdbd2c64770d7befd626a Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 20 Jun 2024 20:31:22 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/Enterprise.svelte          |  8 +-
 src/lib/components/SentimentAnalysis.svelte   |  7 +-
 src/lib/components/ShareStatistics.svelte     |  7 +-
 src/lib/components/VaR.svelte                 | 76 +++++++++++++++++--
 src/lib/store.ts                              |  4 +
 .../crypto/[tickerID]/+layout.server.ts       |  3 -
 src/routes/crypto/[tickerID]/+page.svelte     | 24 +++---
 src/routes/etf/[tickerID]/+layout.server.ts   |  3 -
 src/routes/etf/[tickerID]/+page.svelte        | 20 +++--
 .../stocks/[tickerID]/+layout.server.ts       |  3 -
 src/routes/stocks/[tickerID]/+page.svelte     | 50 +++++-------
 11 files changed, 131 insertions(+), 74 deletions(-)

diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte
index 21b3671a..e164b959 100644
--- a/src/lib/components/Enterprise.svelte
+++ b/src/lib/components/Enterprise.svelte
@@ -1,6 +1,6 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
+    import { enterpriseComponent, displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
 
@@ -154,6 +154,12 @@ const getEnterPriseValues = async (ticker) => {
       // Cache the data for this specific tickerID with a specific name 'getEnterPriseValues'
       setCache(ticker, rawData, 'getEnterPriseValues');
     }
+
+    if(rawData?.length !== 0) {
+        $enterpriseComponent = true;
+    } else {
+        $enterpriseComponent = false;
+    }
 };
 
 
diff --git a/src/lib/components/SentimentAnalysis.svelte b/src/lib/components/SentimentAnalysis.svelte
index bd7536ab..5eff5e79 100644
--- a/src/lib/components/SentimentAnalysis.svelte
+++ b/src/lib/components/SentimentAnalysis.svelte
@@ -1,6 +1,6 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
+    import {sentimentComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
 
     let sentimentList = [];
@@ -60,6 +60,11 @@ const getSentimentAnalysis = async (ticker) => {
       // Cache the data for this specific tickerID with a specific name 'getSentimentAnalysis'
       setCache(ticker, sentimentList, 'getSentimentAnalysis');
     }
+    if(sentimentList?.length !== 0) {
+        $sentimentComponent = true;
+    } else {
+        $sentimentComponent = false;
+    }
 };
 
 
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index a8201279..e99b3fdd 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -1,6 +1,6 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
+    import { shareStatisticsComponent, displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
     import { abbreviateNumber } from "$lib/utils";
@@ -134,6 +134,11 @@ const getShareStatistics = async (ticker) => {
       // Cache the data for this specific tickerID with a specific name 'getShareStatistics'
       setCache(ticker, rawData, 'getShareStatistics');
     }
+    if (Object?.keys(rawData)?.length !== 0) {
+        $shareStatisticsComponent = true;
+    } else {
+        $shareStatisticsComponent = false;
+    }
 };
 
 
diff --git a/src/lib/components/VaR.svelte b/src/lib/components/VaR.svelte
index 9ba70aaa..0c3ac5f2 100644
--- a/src/lib/components/VaR.svelte
+++ b/src/lib/components/VaR.svelte
@@ -1,20 +1,82 @@
 
 <script lang ='ts'>
-    import { displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
+    import { varComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, userRegion, assetType, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
 
-    export let varDict = {};
     export let data;
-    
+
+    let isLoaded = false;
     let rating;
     let outlook;
     let valueAtRisk;
+    let varDict = {}
+
+    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;
+    }
+    });
+
+    const getVaR = async (ticker) => {
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(ticker, 'getVaR');
+    if (cachedData) {
+      varDict = cachedData;
+    } else {
+
+      const postData = {'ticker': ticker};
+      // make the POST request to the endpoint
+      const response = await fetch(apiURL + '/value-at-risk', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(postData)
+      });
+
+      varDict = await response.json();
+
+      // Cache the data for this specific tickerID with a specific name 'getVaR'
+      setCache(ticker, varDict, 'getVaR');
+    }
+
+    if(Object?.keys(varDict)?.length !== 0) {
+    $varComponent = true;
+    }
+    else {
+      $varComponent = false;
+    }
+
+};
+
+
+
 
     $: {
-    if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined' && Object?.keys(varDict)?.length !== 0) {
-        rating = varDict?.rating;
-        outlook = varDict?.outlook;
-        valueAtRisk = varDict?.var;
+    if($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker && typeof window !== 'undefined') {
+        isLoaded = false;
+        const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
+        
+        const asyncFunctions = [
+        getVaR(ticker)
+        ];
+        Promise.all(asyncFunctions)
+            .then((results) => {
+                rating = varDict?.rating;
+                outlook = varDict?.outlook;
+                valueAtRisk = varDict?.var;
+            })
+            .catch((error) => {
+                console.error('An error occurred:', error);
+            });
+        isLoaded = true;
     }
 }
 
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 125b1970..65431bef 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -62,9 +62,13 @@ export const fundamentalAnalysisComponent = writable(<boolean>(false));
 export const priceAnalysisComponent = writable(<boolean>(false));
 export const revenueSegmentationComponent = writable(<boolean>(false));
 export const trendAnalysisComponent = writable(<boolean>(false));
+export const shareStatisticsComponent = writable(<boolean>(false));
 export const shareholderComponent = writable(<boolean>(false));
 export const retailVolumeComponent = writable(<boolean>(false));
 export const darkPoolComponent = writable(<boolean>(false));
+export const enterpriseComponent = writable(<boolean>(false));
+export const varComponent = writable(<boolean>(false));
+export const sentimentComponent = writable(<boolean>(false));
 
 
 export const strategyId = writable(<string> (""));
diff --git a/src/routes/crypto/[tickerID]/+layout.server.ts b/src/routes/crypto/[tickerID]/+layout.server.ts
index b448ef38..48c977ac 100644
--- a/src/routes/crypto/[tickerID]/+layout.server.ts
+++ b/src/routes/crypto/[tickerID]/+layout.server.ts
@@ -84,7 +84,6 @@ export const load = async ({ params, locals, setHeaders}) => {
     fetchData(apiURL,'/crypto-profile',params.tickerID),
     fetchData(apiURL,'/stock-quote',params.tickerID),
     fetchData(apiURL,'/stock-rating',params.tickerID),
-    fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
@@ -94,7 +93,6 @@ export const load = async ({ params, locals, setHeaders}) => {
     getCryptoProfile,
     getStockQuote,
     getStockTARating,
-    getVaR,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
@@ -110,7 +108,6 @@ export const load = async ({ params, locals, setHeaders}) => {
     getCryptoProfile,
     getStockQuote,
     getStockTARating,
-    getVaR,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index 503311db..c7b35deb 100644
--- a/src/routes/crypto/[tickerID]/+page.svelte
+++ b/src/routes/crypto/[tickerID]/+page.svelte
@@ -3,7 +3,7 @@
   import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
   
   import { TrackingModeExitMode } from 'lightweight-charts';
-  import {setCache, getCache, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
+  import {setCache, getCache, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, priceAnalysisComponent, trendAnalysisComponent, sentimentComponent, varComponent, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
   import { onDestroy, onMount } from 'svelte';
   import CryptoKeyInformation from '$lib/components/CryptoKeyInformation.svelte';
   import Lazy from '$lib/components/Lazy.svelte';
@@ -30,7 +30,6 @@
 
     let previousClose = data?.getStockQuote?.previousClose;
     let taRating = {};
-    let varDict = {};
 
     //============================================//
     
@@ -48,7 +47,6 @@
   
   
   let TARating;
-  let VaR;
   //let StockKeyInformation;
 
   //let AnalystEstimate;
@@ -57,8 +55,6 @@
 
 
 onMount(async() => {  
-    VaR = (await import('$lib/components/VaR.svelte')).default;
-
     TARating = (await import('$lib/components/TARating.svelte')).default;
 
   })
@@ -651,14 +647,12 @@ function changeChartType() {
       oneYearPrice = [];
       threeYearPrice = [];
       taRating = {};
-      varDict={}
       output = null;
   
   
       cryptoProfile = data?.getCryptoProfile;
       previousClose = data?.getStockQuote?.previousClose;
       taRating = data?.getStockTARating;
-      varDict = data?.getVaR;
 
       const asyncFunctions = [];
 
@@ -1172,7 +1166,7 @@ afterUpdate(async () => {
 
                                 
                                 <Lazy>
-                                  <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 {!$priceAnalysisComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/PriceAnalysis.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
@@ -1180,7 +1174,7 @@ afterUpdate(async () => {
                                 </Lazy>
 
                                 <Lazy>
-                                  <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 {!$trendAnalysisComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/TrendAnalysis.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
@@ -1188,17 +1182,19 @@ afterUpdate(async () => {
                                 </Lazy>
 
                                 <Lazy>
-                                  <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 {!$sentimentComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
                                 </Lazy>
-                                {#if VaR}
-                                <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0  ? '' : 'hidden'}">
-                                  <VaR data={data} varDict={varDict}/>
+                                <Lazy>
+                                  <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/VaR.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
                                 </div>
-                                {/if}
+                                </Lazy>
                                 
                     
                                  
diff --git a/src/routes/etf/[tickerID]/+layout.server.ts b/src/routes/etf/[tickerID]/+layout.server.ts
index 3da19c07..c2b8d339 100644
--- a/src/routes/etf/[tickerID]/+layout.server.ts
+++ b/src/routes/etf/[tickerID]/+layout.server.ts
@@ -114,7 +114,6 @@ const promises = [
     fetchData(apiURL,'/stock-rating', params.tickerID),
     fetchData(apiURL,'/options-bubble',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
-    fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
@@ -131,7 +130,6 @@ const promises = [
     getStockTARating,
     getOptionsData,
     getWhyPriceMoved,
-    getVaR,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
@@ -154,7 +152,6 @@ const promises = [
     getStockTARating,
     getOptionsData,
     getWhyPriceMoved,
-    getVaR,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 8f8fc70c..51255c05 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/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, 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, 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';
@@ -52,7 +52,6 @@
       let prePostData = {};
       let optionsDict = {};
       let taRating = {};
-      let varDict = {};
 
       let previousClose = data?.getStockQuote?.previousClose;
       //============================================//
@@ -80,14 +79,12 @@
     let SectorSegmentation;
     let OptionsData;
     let WIIM;
-    let VaR;
     //let ETFKeyInformation;
     
     
   onMount(async() => {  
 
     WIIM = (await import('$lib/components/WIIM.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;
     //PricePredictionCard = (await import('$lib/components/PricePredictionCard.svelte')).default;
@@ -705,7 +702,6 @@ async function initializePrice() {
         correlationList = [];
         prePostData = {};
         taRating = {};
-        varDict = {};
         output = null;
   
         
@@ -723,7 +719,6 @@ async function initializePrice() {
         optionsDict = data?.getOptionsData;
         previousClose = data?.getStockQuote?.previousClose
         taRating = data?.getStockTARating;
-        varDict = data?.getVaR;
   
         //stockDeck = data?.getStockDeckData;
         
@@ -1290,18 +1285,21 @@ async function initializePrice() {
                                 </Lazy>
 
                                   <Lazy>
-                                    <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 {!$sentimentComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data} />
                                     {/await}
                                   </div>
                                   </Lazy>
 
-                                  {#if VaR}
-                                  <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0  ? '' : 'hidden'}">
-                                    <VaR data={data} varDict={varDict}/>
+                                  <Lazy>
+                                    <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
+                                    {#await import('$lib/components/VaR.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp} data={data} />
+                                    {/await}
                                   </div>
-                                  {/if}
+                                  </Lazy>
+                                  
 
                                   {#if OptionsData}
                                       <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {Object?.keys(optionsDict)?.length !== 0 ? '' : 'hidden'}">
diff --git a/src/routes/stocks/[tickerID]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index a7e82eaa..7279e687 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -146,7 +146,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     fetchData(apiURL,'/bull-bear-say',params.tickerID),
     fetchData(apiURL,'/wiim',params.tickerID),
     fetchData(apiURL,'/top-etf-ticker-holder',params.tickerID),
-    fetchData(apiURL,'/value-at-risk',params.tickerID),
     fetchData(apiURL,'/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id),
@@ -165,7 +164,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
-    getVaR,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
@@ -190,7 +188,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
-    getVaR,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 38202642..3c657032 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -3,9 +3,8 @@
   import {AreaSeries, Chart, PriceLine, CandlestickSeries} from 'svelte-lightweight-charts';
   
   import { TrackingModeExitMode } from 'lightweight-charts';
-  import {getCache, setCache, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent,  userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
+  import {getCache, setCache, 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 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';
@@ -37,7 +36,6 @@
     let previousClose = data?.getStockQuote?.previousClose;
     let marketMoods = {}
     let taRating = {};
-    let varDict = {};
     let communitySentiment = {};
 
     //============================================//
@@ -60,21 +58,11 @@
   let Correlation;
   let OptionsData;
   let WIIM;
-  let VaR;
-
-  //let StockKeyInformation;
-
 
 
 
   onMount(async() => {
-    /*
-    if ($screenWidth < 640) {
-        StockKeyInformation = (await import('$lib/components/StockKeyInformation.svelte')).default;
-    }
-    */
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    VaR = (await import('$lib/components/VaR.svelte')).default;
     
     TARating = (await import('$lib/components/TARating.svelte')).default;
     StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
@@ -689,7 +677,6 @@ function changeChartType() {
       prePostData = {};
       marketMoods = {};
       taRating = {};
-      varDict={}
       communitySentiment = {}
       output = null;
   
@@ -700,7 +687,6 @@ function changeChartType() {
       previousClose = data?.getStockQuote?.previousClose;
       marketMoods = data?.getBullBearSay;
       taRating = data?.getStockTARating;
-      varDict = data?.getVaR;
       communitySentiment = data?.getCommunitySentiment;
     
       similarstock = data?.getSimilarStock;
@@ -1234,17 +1220,18 @@ function changeChartType() {
 
 
                                 {#if $screenWidth <= 1022} <!--BUG: Dont remove since when changing ETF symbol display freezes-->
-                                  <div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
+                                <div class="w-full mt-10 m-auto sm:p-6 lg:hidden ">
                                     <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
                                       Key Information
                                     </h3>
-                                    <StockKeyInformation 
-                                      stockDeck={stockDeck}
-                                      similarstock={similarstock}
-                                      topETFHolder={topETFHolder}
-                                      data={data}
-                                    />
-    
+                                    {#await import('$lib/components/StockKeyInformation.svelte') then {default: Comp}}
+                                      <svelte:component this={Comp}
+                                        stockDeck={stockDeck}
+                                        similarstock={similarstock}
+                                        topETFHolder={topETFHolder}
+                                        data={data} />
+                                    {/await}
+                                  
                                   </div>
                                   {/if}
 
@@ -1288,18 +1275,21 @@ function changeChartType() {
                                 </Lazy>
 
                                 <Lazy>
-                                  <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 {!$sentimentComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/SentimentAnalysis.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
                                 </Lazy>
 
-                                {#if VaR}
-                                <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(varDict)?.length !== 0  ? '' : 'hidden'}">
-                                  <VaR data={data} varDict={varDict}/>
+
+                                <Lazy>
+                                  <div class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent ? 'hidden' : ''}">
+                                  {#await import('$lib/components/VaR.svelte') then {default: Comp}}
+                                    <svelte:component this={Comp} data={data} />
+                                  {/await}
                                 </div>
-                                {/if}
+                                </Lazy>
                                 
                               
 
@@ -1313,7 +1303,7 @@ function changeChartType() {
 
     
                                   <Lazy>
-                                    <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 {!$enterpriseComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/Enterprise.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data} />
                                     {/await}
@@ -1358,7 +1348,7 @@ function changeChartType() {
 
 
                                 <Lazy>
-                                  <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 {!$shareStatisticsComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data}/>
                                   {/await}