From 9ac8e3bc67171692373d1d73dbcfd964826228c9 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 14 Aug 2024 10:30:40 +0200
Subject: [PATCH] add lazy loading back to stock & etf page

---
 src/routes/etf/[tickerID]/+page.svelte    | 28 +++++++--
 src/routes/stocks/[tickerID]/+page.svelte | 75 +++++++++++++++++++++--
 2 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 4553543d..feb6fd79 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -6,6 +6,7 @@
     import {getCache, setCache, taRatingComponent,  optionsNetFlowComponent, optionComponent, sentimentComponent, varComponent, retailVolumeComponent, trendAnalysisComponent, priceAnalysisComponent, assetType, screenWidth, globalForm, 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;
@@ -1222,48 +1223,63 @@ async function initializePrice() {
                                   </div>
                                   {/if}
 
-  
-                                  <div class="w-full mt-10  m-auto sm:p-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
+    
+                                  <Lazy>
+                                    <div class="w-full mt-10  m-auto sm:p-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
                                     {#await import('$lib/components/WIIM.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data} />
                                     {/await}
                                   </div>
+                                  </Lazy>
 
+                                  
+                                <Lazy>
                                   <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}
                                 </div>
-
+                                </Lazy>
+                                  
+                                <Lazy>
                                   <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}
                                 </div>
+                                </Lazy>
 
+                                  <Lazy>
                                     <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>
 
+                                  <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>
-
+                                  </Lazy>
+                                  
+                                  <Lazy>
                                     <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {!$optionComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/OptionsData.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data} />
                                     {/await}
                                   </div>
+                                  </Lazy>
 
+                                  <Lazy>
                                     <div class="w-full mt-10 sm:mt-0 m-auto sm:p-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
                                       {#await import('$lib/components/OptionsNetFlow.svelte') then {default: Comp}}
                                         <svelte:component this={Comp} data={data} />
                                       {/await}
                                     </div>
+                                  </Lazy>
                                   
                                   <!--
                                   <Lazy>
@@ -1299,18 +1315,22 @@ async function initializePrice() {
                                       </div>  
                                       <!--End SectorSegmentation -->
                                       
+                                      <Lazy>
                                         <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
                                         {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
                                           <svelte:component this={Comp} data={data}/>
                                         {/await}
                                       </div>
+                                      </Lazy>
                                       
           
+                                      <Lazy>
                                         <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
                                           {#await import('$lib/components/TARating.svelte') then {default: Comp}}
                                             <svelte:component this={Comp} data={data}/>
                                           {/await}
                                         </div>
+                                      </Lazy>
                                   
     
                                   
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index e22e9060..b2fbf604 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -4,10 +4,12 @@
   
   import { TrackingModeExitMode } from 'lightweight-charts';
   import {getCache, setCache, corporateLobbyingComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, borrowedShareComponent, clinicalTrialComponent, optionComponent, failToDeliverComponent, marketMakerComponent, analystEstimateComponent, sentimentComponent, screenWidth, displayCompanyName, numberOfUnreadNotification, globalForm, varComponent, shareStatisticsComponent, enterpriseComponent, darkPoolComponent, retailVolumeComponent, shareholderComponent, trendAnalysisComponent,  revenueSegmentationComponent, priceAnalysisComponent, fundamentalAnalysisComponent, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
-  import { onDestroy} from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import BullBearSay from '$lib/components/BullBearSay.svelte';
   import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
-      
+  import Lazy from '$lib/components/Lazy.svelte';
+    
+  
     export let data;
     export let form;
   
@@ -1160,6 +1162,7 @@ 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 ">
+                                  <Lazy>
                                     <h3 class="cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
                                       Key Information
                                     </h3>
@@ -1167,6 +1170,7 @@ function changeChartType() {
                                       <svelte:component this={Comp}
                                         data={data} />
                                     {/await}
+                                  </Lazy>
 
                                   </div>
                                   {/if}
@@ -1178,102 +1182,131 @@ function changeChartType() {
                                   <BullBearSay data={data} marketMoods={marketMoods}/>
                                 </div>
 
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data?.getWhyPriceMoved?.length !== 0  ? '' : 'hidden'}">
                                   {#await import('$lib/components/WIIM.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                                </Lazy>
 
+
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pt-6 {!$analystInsightComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/AnalystInsight.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                                </Lazy>
 
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/ClinicalTrial.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                                </Lazy>
 
 
+                                <Lazy>
                                   <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}
                                 </div>
-
+                                </Lazy>
+                                
+                                <Lazy>
                                   <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}
                                 </div>
+                                </Lazy>
 
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fundamentalAnalysisComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/FundamentalAnalysis.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                                </Lazy>
 
-                           
+                                <Lazy>
                                   <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>
 
 
+                                <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>
+                                </Lazy>
                                 
                               
 
-                              
+                                <Lazy>
                                   <div class="w-full m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/AnalystEstimate.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data}/>
                                   {/await}
                                   </div>
+                                </Lazy>
 
                                 
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/GovernmentContract.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                                </Lazy>
 
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/CorporateLobbying.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data} />
                                     {/await}
                                   </div>
+                                </Lazy>
 
+                                <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/Swap.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data} />
                                     {/await}
                                   </div>
+                                </Lazy>
 
+                                  <Lazy>
                                     <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}
                                   </div>
+                                  </Lazy>
 
+                                  <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>
 
+                                  <Lazy>
                                     <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent ? 'hidden' : ''}">
                                       {#await import('$lib/components/OptionsNetFlow.svelte') then {default: Comp}}
                                         <svelte:component this={Comp} data={data} />
                                       {/await}
                                     </div>
+                                  </Lazy>
                                 
                                   <!--
                                   <Lazy>
@@ -1287,60 +1320,88 @@ function changeChartType() {
                                 
 
                                  <!--Start RevenueSegmentation-->
+                                  <Lazy>
                                     <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$revenueSegmentationComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/RevenueSegmentation.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} apiURL={data?.apiURL} apiKey={data?.apiKey} userTier={data?.user?.tier}/>
                                     {/await}
                                     </div>
+                                    </Lazy>
                                <!--End RevenueSegmentation-->
                               
+                              <Lazy>
                                 <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/FailToDeliver.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                              </Lazy>
 
+                              <Lazy>
                                 <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$borrowedShareComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/BorrowedShare.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
+                              </Lazy>
+                              
 
+                              <Lazy>
                                 <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$marketMakerComponent ? 'hidden' : ''}">
                                   {#await import('$lib/components/MarketMaker.svelte') then {default: Comp}}
                                     <svelte:component this={Comp} data={data} />
                                   {/await}
                                 </div>
-
+                              </Lazy>
+                              
+                              
+                               <Lazy>
                                 <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent ? 'hidden' : ''}">
                                 {#await import('$lib/components/DarkPool.svelte') then {default: Comp}}
                                   <svelte:component this={Comp} data={data} />
                                 {/await}
                               </div>
+                              </Lazy>
 
+
+                               <Lazy>
                                 <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
                                 {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
                                   <svelte:component this={Comp} data={data} />
                                 {/await}
                               </div>
+                              </Lazy>
 
+
+                                <Lazy>
                                   <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}
                                 </div>
+                                </Lazy>
 
+                                  
+                                   <!--Start Shareholders-->
+                                   <Lazy>
                                     <div class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent ? 'hidden' : ''}">
                                     {#await import('$lib/components/ShareHolders.svelte') then {default: Comp}}
                                       <svelte:component this={Comp} data={data}/>
                                     {/await}
                                     </div>
+                                    </Lazy>
+                                   <!--End Shareholders-->
 
+  
+                                 
+                              
+                                  <Lazy>
                                     <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent ? 'hidden' : ''}">
                                       {#await import('$lib/components/TARating.svelte') then {default: Comp}}
                                         <svelte:component this={Comp} data={data}/>
                                       {/await}
                                     </div>
+                                  </Lazy>
 
   
                   
@@ -1361,11 +1422,13 @@ function changeChartType() {
                                   </div>
                                   -->
 
+                                  <Lazy>
                                     <div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {data?.getStockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
                                       {#await import('$lib/components/StockSplits.svelte') then {default: Comp}}
                                         <svelte:component this={Comp} stockDeck={data?.getStockDeck}/>
                                       {/await}
                                   </div>
+                                </Lazy>