lazy load WIIM component

src/lib/components/TARating.svelte

@@ -87,7 +87,6 @@ async function updateData() {
       });
       
       isLoaded = true;
-      console.log(signalList);
     } catch (error) {
       console.error("Error fetching data:", error);
     }

src/lib/components/WIIM.svelte

@@ -3,9 +3,10 @@
     import {stockTicker} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
 
-    export let wiim = [];
     export let data;
     
+    let isLoaded = false;
+    let wiim;
     let showFullHistory = false;
 
 function latestInfoDate(inputDate) {
@@ -28,9 +29,12 @@ function latestInfoDate(inputDate) {
     
 $: {
 
-    if ($stockTicker && typeof window !== 'undefined' && typeof wiim !== 'undefined' && wiim?.length !== 0)
-    {
-        showFullHistory = false;   
+    if ($stockTicker && typeof window !== 'undefined')
+    {   
+        isLoaded = false;
+        showFullHistory = false;
+        wiim = data?.getWhyPriceMoved || [];
+        isLoaded = true;
     }        
     
 }
@@ -55,6 +59,7 @@ $: {
             </div>
             
             {#if data?.user?.tier === 'Pro'}
+            {#if isLoaded}
             {#if wiim?.length !== 0}
             <div class="mt-7">
             {#each (showFullHistory ? wiim : wiim?.slice(0,2)) as item, index}
@@ -129,6 +134,16 @@ $: {
             
             {/if}
 
+            {:else}
+            <div class="flex justify-center items-center h-80">
+                <div class="relative">
+                <label class="bg-[#09090B] 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-[#111112] 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/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, correlationComponent, dcfComponent, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, impliedVolatilityComponent, 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, currentPrice, stockTicker, isOpen, isBeforeMarketOpen, isWeekend} from '$lib/store';
+  import {getCache, setCache, taRatingComponent, swapComponent, analystInsightComponent, governmentContractComponent, optionsNetFlowComponent, impliedVolatilityComponent, 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, onMount } from 'svelte';
   import BullBearSay from '$lib/components/BullBearSay.svelte';
   import CommunitySentiment from '$lib/components/CommunitySentiment.svelte';
@@ -31,21 +31,7 @@
       }
     }
   
-  
-  
-  
-  
-  
-  let StockSplits;
-  let WIIM;
 
-
-
-  onMount(async() => {
-    WIIM = (await import('$lib/components/WIIM.svelte')).default;
-  })
-  
-  
   
   
   //const startTimeTracking = performance.now();
@@ -1200,11 +1186,13 @@ function changeChartType() {
                                   <BullBearSay data={data} marketMoods={marketMoods}/>
                                 </div>
 
-                                {#if WIIM}
-                                <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'}">
-                                  <WIIM wiim={data?.getWhyPriceMoved} data={data}/>
+                                <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>
-                                {/if}
+                                </Lazy>
 
 
                                 <Lazy>