From e409213327128b84e69760ba22c473f8b95494f9 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 26 Jul 2024 15:05:38 +0200
Subject: [PATCH] lazy loading TA Rating and clean code

---
 src/lib/components/AnalystEstimate.svelte     |   2 +-
 src/lib/components/AnalystInsight.svelte      |   2 +-
 src/lib/components/BorrowedShare.svelte       |   2 +-
 src/lib/components/BullBearSay.svelte         |   2 +-
 src/lib/components/ClinicalTrial.svelte       |   2 +-
 src/lib/components/DCF.svelte                 |   2 +-
 src/lib/components/DarkPool.svelte            |   2 +-
 src/lib/components/Enterprise.svelte          |   2 +-
 src/lib/components/FailToDeliver.svelte       |   2 +-
 src/lib/components/FundamentalAnalysis.svelte |   2 +-
 src/lib/components/GovernmentContract.svelte  |   2 +-
 src/lib/components/ImpliedVolatility.svelte   |   2 +-
 src/lib/components/MarketMaker.svelte         |   2 +-
 src/lib/components/OptionsData.svelte         |   2 +-
 src/lib/components/OptionsNetFlow.svelte      |   2 +-
 src/lib/components/PriceAnalysis.svelte       |   2 +-
 src/lib/components/RetailVolume.svelte        |   7 +-
 src/lib/components/RevenueSegmentation.svelte |   2 +-
 src/lib/components/SentimentAnalysis.svelte   |   2 +-
 src/lib/components/ShareHolders.svelte        |   2 +-
 src/lib/components/ShareStatistics.svelte     |   2 +-
 src/lib/components/Swap.svelte                |   2 +-
 src/lib/components/TARating.svelte            | 256 +++++++++++-------
 src/lib/components/TrendAnalysis.svelte       |   2 +-
 src/lib/components/VaR.svelte                 |   2 +-
 src/lib/components/WIIM.svelte                |   2 +-
 src/lib/store.ts                              |   1 +
 .../crypto/[tickerID]/+layout.server.ts       |  31 +--
 src/routes/crypto/[tickerID]/+layout.svelte   |  31 +--
 src/routes/crypto/[tickerID]/+page.svelte     |  37 +--
 src/routes/etf/[tickerID]/+layout.server.ts   |  40 +--
 src/routes/etf/[tickerID]/+layout.svelte      |  31 +--
 src/routes/etf/[tickerID]/+page.svelte        |  42 +--
 .../stocks/[tickerID]/+layout.server.ts       |   3 -
 src/routes/stocks/[tickerID]/+page.svelte     |  23 +-
 35 files changed, 264 insertions(+), 286 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index 20f3bf71..85fbe165 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -340,7 +340,7 @@ $: {
                 {/if}
 
                 {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/AnalystInsight.svelte b/src/lib/components/AnalystInsight.svelte
index ea7aae5a..ce11ad64 100644
--- a/src/lib/components/AnalystInsight.svelte
+++ b/src/lib/components/AnalystInsight.svelte
@@ -168,7 +168,7 @@ function latestInfoDate(inputDate) {
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte
index 5d52ea02..e1268aaa 100644
--- a/src/lib/components/BorrowedShare.svelte
+++ b/src/lib/components/BorrowedShare.svelte
@@ -339,7 +339,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/BullBearSay.svelte b/src/lib/components/BullBearSay.svelte
index 06aae73a..a938fceb 100644
--- a/src/lib/components/BullBearSay.svelte
+++ b/src/lib/components/BullBearSay.svelte
@@ -126,7 +126,7 @@ $: {
       </span>
     </div>
     {:else}
-    <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+    <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>
       Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
     </div>
diff --git a/src/lib/components/ClinicalTrial.svelte b/src/lib/components/ClinicalTrial.svelte
index bfe1605d..3e52e3a0 100644
--- a/src/lib/components/ClinicalTrial.svelte
+++ b/src/lib/components/ClinicalTrial.svelte
@@ -332,7 +332,7 @@ $: {
         {/if}
 
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
index 4dae86a5..ef170948 100644
--- a/src/lib/components/DCF.svelte
+++ b/src/lib/components/DCF.svelte
@@ -298,7 +298,7 @@
 
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
                 </div>
diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte
index c4110401..0863f9a7 100644
--- a/src/lib/components/DarkPool.svelte
+++ b/src/lib/components/DarkPool.svelte
@@ -319,7 +319,7 @@ $: {
         {/if}
 
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte
index bd033637..d39c725a 100644
--- a/src/lib/components/Enterprise.svelte
+++ b/src/lib/components/Enterprise.svelte
@@ -252,7 +252,7 @@ $: {
             {/if}
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index f5f7d4d2..b52a1462 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -337,7 +337,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/FundamentalAnalysis.svelte b/src/lib/components/FundamentalAnalysis.svelte
index a8be3535..ac887c8c 100644
--- a/src/lib/components/FundamentalAnalysis.svelte
+++ b/src/lib/components/FundamentalAnalysis.svelte
@@ -217,7 +217,7 @@ $: {
             {/if}
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/GovernmentContract.svelte b/src/lib/components/GovernmentContract.svelte
index ab93b0a5..21959260 100644
--- a/src/lib/components/GovernmentContract.svelte
+++ b/src/lib/components/GovernmentContract.svelte
@@ -278,7 +278,7 @@
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index 17f2297b..b443f0c2 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -379,7 +379,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte
index f979f538..908c1d0b 100644
--- a/src/lib/components/MarketMaker.svelte
+++ b/src/lib/components/MarketMaker.svelte
@@ -379,7 +379,7 @@ else {
       {/if}
 
       {:else}
-      <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+      <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>
           Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
         </div>
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index b79e5e5a..438aff49 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -244,7 +244,7 @@ $: {
             </div>  
             {/if}
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/OptionsNetFlow.svelte b/src/lib/components/OptionsNetFlow.svelte
index b8e0ecaa..8ea8bdd9 100644
--- a/src/lib/components/OptionsNetFlow.svelte
+++ b/src/lib/components/OptionsNetFlow.svelte
@@ -298,7 +298,7 @@
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index 71d082b4..22cf843a 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -313,7 +313,7 @@ $: {
             </div>  
             {/if}
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte
index 191832e8..e931513b 100644
--- a/src/lib/components/RetailVolume.svelte
+++ b/src/lib/components/RetailVolume.svelte
@@ -223,7 +223,10 @@ $: {
       ];
       Promise.all(asyncFunctions)
           .then((results) => {
-            optionsData = getPlotOptions()
+            if(Object?.keys(rawData)?.length !== 0) {
+              optionsData = getPlotOptions()
+            }
+           
           })
           .catch((error) => {
             console.error('An error occurred:', error);
@@ -345,7 +348,7 @@ $: {
             {/if}
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index 5875ef65..0bb2f7b1 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -323,7 +323,7 @@ $: {
                 {/if}
     
                 {:else}
-                <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+                <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>
                     Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
                   </div>
diff --git a/src/lib/components/SentimentAnalysis.svelte b/src/lib/components/SentimentAnalysis.svelte
index 29c014df..b256ea54 100644
--- a/src/lib/components/SentimentAnalysis.svelte
+++ b/src/lib/components/SentimentAnalysis.svelte
@@ -253,7 +253,7 @@ $: {
           {/if}
 
           {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 9c033714..bab8c2ff 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -397,7 +397,7 @@ $: {
                 {/if}
     
                 {:else}
-                <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+                <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>
                     Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
                   </div>
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index 58a087f5..cbb6cf7a 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -282,7 +282,7 @@ $: {
             {/if}
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index 728c2641..13764b5c 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -313,7 +313,7 @@
         {/if}
   
         {:else}
-        <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+        <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>
             Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
           </div>
diff --git a/src/lib/components/TARating.svelte b/src/lib/components/TARating.svelte
index 587e799a..e879e5a0 100644
--- a/src/lib/components/TARating.svelte
+++ b/src/lib/components/TARating.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
+  import { taRatingComponent, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
   import SignalBar from '$lib/components/SignalBar.svelte'
   import InfoModal from '$lib/components/InfoModal.svelte';
   import Lazy from 'svelte-lazy';
 
-  export let taRating = {};
-
+  export let data;
 
+  let rawData = [];
+  let isLoaded = false;
   let signalList = [];
   let showFullStats = false;
   let overallSignal = 'n/a'
@@ -21,36 +22,78 @@
     Together, these indicators assist in evaluating the overall market sentiment and potential future price movements.
   `;
 
+  
+async function getTaRating(ticker) {
+    const cachedData = getCache(ticker, 'getTaRating');
+    if (cachedData) {
+      rawData = cachedData;
+    } else {
+      try {
+        const response = await fetch(data?.apiURL+'/stock-rating', {
+          method: 'POST',
+          headers: {
+            "Content-Type": "application/json",
+            "X-API-KEY": data?.apiKey
+          },
+          body: JSON.stringify({ ticker })
+        });
+        rawData = await response.json();
 
-    
-$: {
-  if (($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined' && Object?.keys(taRating)?.lenght !== 0) {
-    showFullStats = false;
-    overallSignal = taRating?.overallSignal;
-    signalList = taRating?.signalList ?? []
-    buyCount = 0;
-    sellCount = 0;
-    neutralCount=0;
+        showFullStats = false;
+        overallSignal = rawData?.overallSignal;
+        signalList = rawData?.signalList ?? []
+        buyCount = 0;
+        sellCount = 0;
+        neutralCount=0;
 
-    signalList?.forEach(item => {
-      switch (item?.signal) {
-        case "Strong Buy":
-          buyCount++;
-          break;
-        case "Buy":
-          buyCount++;
-          break;
-        case "Sell":
-          sellCount++;
-          break;
-        case "Strong Sell":
-          sellCount++;
-          break;
-        default:
-          neutralCount++;
+        signalList?.forEach(item => {
+          switch (item?.signal) {
+            case "Strong Buy":
+              buyCount++;
+              break;
+            case "Buy":
+              buyCount++;
+              break;
+            case "Sell":
+              sellCount++;
+              break;
+            case "Strong Sell":
+              sellCount++;
+              break;
+            default:
+              neutralCount++;
+          }
+        });
+
+
+        setCache(ticker, rawData, 'getTaRating');
+      } catch (error) {
+        console.error('Failed to fetch swap data:', error);
+        rawData = {};
       }
-    });
+    }
+    if (rawData?.signalList?.lenght !== 0) {
+      $taRatingComponent = true;
+    }
+    else {
+      $taRatingComponent = false;
+    }
+    console.log($taRatingComponent)
+  }
+  
 
+
+
+
+$: {
+  if (($assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker) && typeof window !== 'undefined') {
+    
+    isLoaded = false;
+    const ticker = $assetType === 'stock' ? $stockTicker : $assetType === 'etf' ? $etfTicker : $cryptoTicker;
+    getTaRating(ticker).then(() => {
+      isLoaded = true;
+    });
+    
   }
 }
 
@@ -72,82 +115,101 @@ $: {
     />
     </div>
 
+    {#if data?.user?.tier === 'Pro'}
+      {#if isLoaded}  
+        {#if Object?.keys(rawData)?.length !== 0}
+
+          {#if overallSignal !== 'n/a'}
+          <div class="text-white text-[1rem] sm:text-lg mt-3 mb-8 text-start">
+            Out of 11 indicators, <span class="font-semibold text-[#10DB06]">{buyCount}</span> indicates a Buy, 
+            <span class="font-semibold text-[#F8901E]">{neutralCount}</span> are Neutral and <span class="font-semibold text-[#FF2F1F]">{sellCount}</span> indicate a Sell.
+            On average, the signal is to
+            {#if overallSignal === 'Buy' || overallSignal === 'Strong Buy'}
+            <span class="text-[#10DB06] sm:font-medium">
+              <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#10db06" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="m3 17l6-6l4 4l8-8"/><path d="M17 7h4v4"/></g></svg>
+              Buy.
+            </span>
+
+            {:else if overallSignal === 'Neutral'}
+            <span class="text-[#E57C34] sm:font-medium">
+              <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#e57c34" d="m22 12l-4-4v3H3v2h15v3l4-4Z"/></svg>
+              Hold.
+            </span>
+            {:else if overallSignal === 'Sell' || overallSignal === 'Strong Sell'}
+            <span class="text-[#FF2F1F] sm:font-medium">
+              <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#ff2f1f" d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"/></svg>
+              Sell.
+            </span>
+            {:else}
+            <span class="text-[#FF2F1F] sm:font-medium">
+              n/a.
+            </span>
+            {/if}
+          </div>
+          {/if}
 
 
-    {#if overallSignal !== 'n/a'}
-    <div class="text-white text-[1rem] sm:text-lg mt-3 mb-8 text-start">
-      Out of 11 indicators, <span class="font-semibold text-[#10DB06]">{buyCount}</span> indicates a Buy, 
-      <span class="font-semibold text-[#F8901E]">{neutralCount}</span> are Neutral and <span class="font-semibold text-[#FF2F1F]">{sellCount}</span> indicate a Sell.
-      On average, the signal is to
-      {#if overallSignal === 'Buy' || overallSignal === 'Strong Buy'}
-      <span class="text-[#10DB06] sm:font-medium">
-        <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#10db06" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="m3 17l6-6l4 4l8-8"/><path d="M17 7h4v4"/></g></svg>
-        Buy.
-      </span>
+            <!--Start Momentum Indicators-->
+            <div class="w-full overflow-hidden">
+              <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
+                <table class="table table-sm table-compact w-full mb-5 mt-5">
+                  <!-- head -->
+                  <thead>
+                    <tr>
+                      <th class="text-white text-sm font-medium bg-[#09090B] font-semibold">Name</th>
+                      <th class="text-white text-sm font-medium bg-[#09090B] font-semibold text-end">Value</th>
+                      <th class="text-white text-sm font-medium bg-[#09090B] font-semibold text-end">Signal</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index}
+                    <tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }">
+                      <td class="text-white text-sm w-1/2 sm:w-full">
+                        {item?.name}
+                      </td>
 
-      {:else if overallSignal === 'Neutral'}
-      <span class="text-[#E57C34] sm:font-medium">
-        <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#e57c34" d="m22 12l-4-4v3H3v2h15v3l4-4Z"/></svg>
-        Hold.
-      </span>
-      {:else if overallSignal === 'Sell' || overallSignal === 'Strong Sell'}
-      <span class="text-[#FF2F1F] sm:font-medium">
-        <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#ff2f1f" d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"/></svg>
-        Sell.
-      </span>
-      {:else}
-      <span class="text-[#FF2F1F] sm:font-medium">
-        n/a.
-      </span>
-      {/if}
-    </div>
-    {/if}
+                      <td class="text-white text-end">
+                        <span class="text-white text-md font-medium">
+                          {item?.value}
+                        </span>
+                      </td>
 
+                      <td class="text-white">
+                        <SignalBar signal = {item?.signal} />
+                      </td>
+                  
 
-    <!--Start Momentum Indicators-->
-    <div class="w-full overflow-hidden">
-      <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-        <table class="table table-sm table-compact w-full mb-5 mt-5">
-          <!-- head -->
-          <thead>
-            <tr>
-              <th class="text-white text-sm font-medium bg-[#09090B] font-semibold">Name</th>
-              <th class="text-white text-sm font-medium bg-[#09090B] font-semibold text-end">Value</th>
-              <th class="text-white text-sm font-medium bg-[#09090B] font-semibold text-end">Signal</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index}
-            <tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }">
-              <td class="text-white text-sm w-1/2 sm:w-full">
-                {item?.name}
-              </td>
+                    </tr>
+                    {/each}
+                  </tbody>
+                </table>
 
-              <td class="text-white text-end">
-                <span class="text-white text-md font-medium">
-                  {item?.value}
-                </span>
-              </td>
-
-              <td class="text-white">
-                <SignalBar signal = {item?.signal} />
-              </td>
-          
-
-            </tr>
-            {/each}
-          </tbody>
-        </table>
-
-        <label on:click={() => showFullStats = !showFullStats} class="{signalList?.length < 4 ? 'hidden' : ''} cursor-pointer m-auto flex justify-center items-center mt-5">
-          <svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
-        </label>
-
-      </Lazy>
-    </div>
-  <!--End Momentum Indicators-->
+                <label on:click={() => showFullStats = !showFullStats} class="{signalList?.length < 4 ? 'hidden' : ''} cursor-pointer m-auto flex justify-center items-center mt-5">
+                  <svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
+                </label>
 
+              </Lazy>
+            </div>
+          <!--End Momentum Indicators-->
 
+          {/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>
+              Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+            </div>
+          {/if}
 
   </main>
 </section>
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index 820ed14f..d6d9fe9e 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -230,7 +230,7 @@ $: {
           {/if}
 
           {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/VaR.svelte b/src/lib/components/VaR.svelte
index f0974689..831e4727 100644
--- a/src/lib/components/VaR.svelte
+++ b/src/lib/components/VaR.svelte
@@ -134,7 +134,7 @@
             {/if}
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index 510d2f1e..cc90f2d4 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -130,7 +130,7 @@ $: {
             {/if}
 
             {:else}
-            <div class="shadow-lg shadow-bg-[#000] bg-[#09090B] 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">
+            <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>
                 Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
               </div>
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 46ea8cb1..db107181 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -79,6 +79,7 @@ export const optionsNetFlowComponent= writable(<boolean>(false));
 export const governmentContractComponent= writable(<boolean>(false));
 export const analystInsightComponent= writable(<boolean>(false));
 export const swapComponent= writable(<boolean>(false));
+export const taRatingComponent= writable(<boolean>(false));
 
 
 
diff --git a/src/routes/crypto/[tickerID]/+layout.server.ts b/src/routes/crypto/[tickerID]/+layout.server.ts
index 28c8d14b..9198beea 100644
--- a/src/routes/crypto/[tickerID]/+layout.server.ts
+++ b/src/routes/crypto/[tickerID]/+layout.server.ts
@@ -3,9 +3,7 @@ const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
 let companyName;
 
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-const fetchData = async (apiURL, endpoint, ticker) => {
+const fetchData = async (apiURL, apiKey, endpoint, ticker) => {
 
   const postData = {
     ticker: ticker
@@ -64,29 +62,26 @@ async function fetchPortfolio(fastifyURL, userId)
 
 export const load = async ({ params, locals, setHeaders}) => {
 
- 
-    const userRegion = locals.region?.split("::")[0];
 
-    let apiURL;
-
-    let fastifyURL;
+    const userRegion = locals?.region?.split("::")[0];
 
+    let apiURL = locals?.apiURL;
+    let fastifyURL = locals?.fastifyURL;
+    let apiKey = locals?.apiKey;
+    let wsURL;
+    
     if (usRegion?.includes(userRegion)) {
-        apiURL = import.meta.env.VITE_USEAST_API_URL;
-        fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
+        wsURL = import.meta.env.VITE_USEAST_WS_URL;
     } else {
-        apiURL = import.meta.env.VITE_EU_API_URL;
-        fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
+        wsURL = import.meta.env.VITE_EU_WS_URL;
     };
   
-    
 
 
     const promises = [
-    fetchData(apiURL,'/crypto-profile',params.tickerID),
-    fetchData(apiURL,'/stock-quote',params.tickerID),
-    fetchData(apiURL,'/stock-rating',params.tickerID),
-    fetchData(apiURL,'/one-day-price',params.tickerID),
+    fetchData(apiURL,apiKey,'/crypto-profile',params.tickerID),
+    fetchData(apiURL,apiKey,'/stock-quote',params.tickerID),
+    fetchData(apiURL,apiKey,'/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
   ];
@@ -94,7 +89,6 @@ export const load = async ({ params, locals, setHeaders}) => {
   const [
     getCryptoProfile,
     getStockQuote,
-    getStockTARating,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
@@ -109,7 +103,6 @@ export const load = async ({ params, locals, setHeaders}) => {
   return {
     getCryptoProfile,
     getStockQuote,
-    getStockTARating,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index d7914619..97721e78 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 
-  import {searchBarData, userRegion, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, cryptoTicker, assetType} from '$lib/store';
+  import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, cryptoTicker, assetType} from '$lib/store';
 
   import { onMount, onDestroy, afterUpdate} from "svelte";
   import { goto } from '$app/navigation';
@@ -16,25 +16,6 @@
   $realtimePrice = null;
   
 
-const usRegion = ['cle1','iad1','pdx1','sfo1'];
-let fastifyURL;
-let wsURL;
-let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-
-userRegion?.subscribe(value => {
-if (usRegion?.includes(value)) {
-  apiURL = import.meta.env.VITE_USEAST_API_URL;
-  fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
-  wsURL = import.meta.env.VITE_USEAST_WS_URL;
-} else {
-  apiURL = import.meta.env.VITE_EU_API_URL;
-  fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
-  wsURL = import.meta.env.VITE_EU_WS_URL;
-}
-});
-
 async function loadSearchData() {
     
     if($searchBarData?.length !== 0)
@@ -44,10 +25,10 @@ async function loadSearchData() {
     else {
   
        // make the GET request to the endpoint
-       const response = await fetch(apiURL+'/searchbar-data', {
+       const response = await fetch(data?.apiURL+'/searchbar-data', {
       method: 'GET',
       headers: {
-          "Content-Type": "application/json","X-API-KEY": apiKey
+          "Content-Type": "application/json","X-API-KEY": data?.apiKey
       },
       });
   
@@ -176,7 +157,7 @@ async function toggleUserWatchlist(watchListId: string) {
       'ticker': $cryptoTicker,
     };
 
-    const response = await fetch(fastifyURL + '/update-watchlist', {
+    const response = await fetch(data?.fastifyURL + '/update-watchlist', {
       method: 'POST',
       headers: {
          "Content-Type": "application/json"
@@ -211,7 +192,7 @@ async function fetchPortfolio()
 {
   const postData = {'userId': data?.user?.id};
 
-    const response = await fetch(fastifyURL+'/get-portfolio-data', {
+    const response = await fetch(data?.fastifyURL+'/get-portfolio-data', {
       method: 'POST',
       headers: {
        "Content-Type": "application/json"
@@ -246,7 +227,7 @@ async function websocketRealtimeData() {
 
   previousTicker = $cryptoTicker;
   try {
-    socket = new WebSocket(wsURL+"/realtime-crypto-data");
+    socket = new WebSocket(data?.wsURL+"/realtime-crypto-data");
 
     socket.addEventListener('open', () => {
       //console.log('WebSocket connection opened');
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index 7ae63c2b..cee7acd9 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, priceAnalysisComponent, trendAnalysisComponent, sentimentComponent, varComponent, userRegion, isCrosshairMoveActive, realtimePrice, priceIncrease, currentPortfolioPrice, currentPrice, clientSideCache, cryptoTicker} from '$lib/store';
+  import {setCache, getCache, screenWidth, taRatingComponent, 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';
@@ -31,7 +31,6 @@ let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
     let cryptoProfile = data?.getStockDeck ?? [];
 
     let previousClose = data?.getStockQuote?.previousClose;
-    let taRating = {};
 
     //============================================//
     
@@ -48,26 +47,6 @@ let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
   
   
   
-  let TARating;
-  //let StockKeyInformation;
-
-  //let AnalystEstimate;
-
-
-
-
-onMount(async() => {  
-    TARating = (await import('$lib/components/TARating.svelte')).default;
-
-  })
-  
-  
-  
-  
-  //const startTimeTracking = performance.now();
-  
-  
-  
   
   //==========================//
   
@@ -648,13 +627,11 @@ function changeChartType() {
       oneMonthPrice = [];
       oneYearPrice = [];
       threeYearPrice = [];
-      taRating = {};
       output = null;
   
   
       cryptoProfile = data?.getCryptoProfile;
       previousClose = data?.getStockQuote?.previousClose;
-      taRating = data?.getStockTARating;
 
       const asyncFunctions = [];
 
@@ -1201,11 +1178,13 @@ afterUpdate(async () => {
                     
                                  
   
-                                <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {Object?.keys(taRating)?.length !== 0 ? '' : 'hidden'} ">
-                                    {#if TARating}
-                                    <TARating taRating = {data?.getStockTARating}/>
-                                    {/if}
-                                </div>
+                                <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/etf/[tickerID]/+layout.server.ts b/src/routes/etf/[tickerID]/+layout.server.ts
index af0ab095..b63e936b 100644
--- a/src/routes/etf/[tickerID]/+layout.server.ts
+++ b/src/routes/etf/[tickerID]/+layout.server.ts
@@ -2,7 +2,6 @@
 const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
 let companyName;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
 
 
 function cleanString(input) {
@@ -30,7 +29,7 @@ function cleanString(input) {
     return input?.replace(pattern, '')?.trim();
   }
 
-const fetchData = async (apiURL, endpoint, ticker) => {
+const fetchData = async (apiURL, apiKey, endpoint, ticker) => {
 
   const postData = {
     ticker: ticker
@@ -89,11 +88,18 @@ async function fetchPortfolio(fastifyURL, userId)
 
 export const load = async ({ params, locals, setHeaders}) => {
     
-    const userRegion = locals.region?.split("::")[0];
+    const userRegion = locals?.region?.split("::")[0];
 
-    let apiURL;
-
-    let fastifyURL;
+    let apiURL = locals?.apiURL;
+    let fastifyURL = locals?.fastifyURL;
+    let apiKey = locals?.apiKey;
+    let wsURL;
+    
+    if (usRegion?.includes(userRegion)) {
+        wsURL = import.meta.env.VITE_USEAST_WS_URL;
+    } else {
+        wsURL = import.meta.env.VITE_EU_WS_URL;
+    };
 
     if (usRegion?.includes(userRegion)) {
         apiURL = import.meta.env.VITE_USEAST_API_URL;
@@ -107,16 +113,15 @@ export const load = async ({ params, locals, setHeaders}) => {
 
 
 const promises = [
-    fetchData(apiURL,'/etf-profile', params.tickerID),
-    fetchData(apiURL,'/similar-etfs',  params.tickerID),
-    fetchData(apiURL,'/etf-country-weighting', params.tickerID),
-    fetchData(apiURL,'/stock-correlation', params.tickerID),
-    fetchData(apiURL,'/etf-holdings',  params.tickerID),
-    fetchData(apiURL,'/stock-dividend',params.tickerID),
-    fetchData(apiURL,'/stock-quote',  params.tickerID),
-    fetchData(apiURL,'/stock-rating', params.tickerID),
-    fetchData(apiURL,'/wiim',params.tickerID),
-    fetchData(apiURL,'/one-day-price',params.tickerID),
+    fetchData(apiURL,apiKey, '/etf-profile', params.tickerID),
+    fetchData(apiURL,apiKey, '/similar-etfs',  params.tickerID),
+    fetchData(apiURL,apiKey, '/etf-country-weighting', params.tickerID),
+    fetchData(apiURL,apiKey, '/stock-correlation', params.tickerID),
+    fetchData(apiURL,apiKey, '/etf-holdings',  params.tickerID),
+    fetchData(apiURL,apiKey, '/stock-dividend',params.tickerID),
+    fetchData(apiURL,apiKey, '/stock-quote',  params.tickerID),
+    fetchData(apiURL,apiKey, '/wiim',params.tickerID),
+    fetchData(apiURL,apiKey, '/one-day-price',params.tickerID),
     fetchWatchlist(fastifyURL, locals?.user?.id),
     fetchPortfolio(fastifyURL, locals?.user?.id)
   ];
@@ -129,7 +134,6 @@ const promises = [
     getETFHoldings,
     getStockDividend,
     getStockQuote,
-    getStockTARating,
     getWhyPriceMoved,
     getOneDayPrice,
     getUserWatchlist,
@@ -150,12 +154,12 @@ const promises = [
     getETFHoldings,
     getStockDividend,
     getStockQuote,
-    getStockTARating,
     getWhyPriceMoved,
     getOneDayPrice,
     getUserWatchlist,
     getUserPortfolio,
     companyName,
+    wsURL,
   };
 
   
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 03040e59..913f2576 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
 
-    import {searchBarData, globalForm, userRegion, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
+    import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
 
     import { onMount, onDestroy, afterUpdate} from "svelte";
     import { goto } from '$app/navigation';
@@ -19,25 +19,6 @@
   $realtimePrice = null;
     
   
-  const usRegion = ['cle1','iad1','pdx1','sfo1'];
-  
-let fastifyURL;
-let wsURL;
-let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-
-userRegion?.subscribe(value => {
-if (usRegion?.includes(value)) {
-  apiURL = import.meta.env.VITE_USEAST_API_URL;
-  fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
-  wsURL = import.meta.env.VITE_USEAST_WS_URL;
-} else {
-  apiURL = import.meta.env.VITE_EU_API_URL;
-  fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
-  wsURL = import.meta.env.VITE_EU_WS_URL;
-}
-});
 
 async function loadSearchData() {
     
@@ -48,10 +29,10 @@ async function loadSearchData() {
     else {
   
        // make the GET request to the endpoint
-       const response = await fetch(apiURL+'/searchbar-data', {
+       const response = await fetch(data?.apiURL+'/searchbar-data', {
       method: 'GET',
       headers: {
-          "Content-Type": "application/json","X-API-KEY": apiKey
+          "Content-Type": "application/json","X-API-KEY": data?.apiKey
       },
       });
   
@@ -187,7 +168,7 @@ async function toggleUserWatchlist(watchListId: string) {
       'ticker': $etfTicker,
     };
 
-    const response = await fetch(fastifyURL + '/update-watchlist', {
+    const response = await fetch(data?.fastifyURL + '/update-watchlist', {
       method: 'POST',
       headers: {
          "Content-Type": "application/json"
@@ -221,7 +202,7 @@ async function fetchPortfolio()
 {
   const postData = {'userId': data?.user?.id};
 
-    const response = await fetch(fastifyURL+'/get-portfolio-data', {
+    const response = await fetch(data?.fastifyURL+'/get-portfolio-data', {
       method: 'POST',
       headers: {
         "Content-Type": "application/json"
@@ -257,7 +238,7 @@ async function fetchPortfolio()
   
     previousTicker = $etfTicker;
     try {
-      socket = new WebSocket(wsURL+"/realtime-data");
+      socket = new WebSocket(data?.wsURL+"/realtime-data");
   
       socket.addEventListener('open', () => {
         //console.log('WebSocket connection opened');
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index a51e92c1..26a59e7f 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, impliedVolatilityComponent, optionsNetFlowComponent, 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 {getCache, setCache, taRatingComponent, impliedVolatilityComponent, 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';
@@ -12,20 +12,7 @@
     export let form;
   
   $assetType = 'etf';
-  const usRegion = ['cle1','iad1','pdx1','sfo1'];
-    
-  let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
 
-  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 output = null;
     
@@ -52,7 +39,6 @@ let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
       let dividendList = [];
       let similarTicker = []
       let prePostData = {};
-      let taRating = {};
 
       let previousClose = data?.getStockQuote?.previousClose;
       //============================================//
@@ -72,7 +58,6 @@ let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
     
     
     
-    let TARating;
   //let PricePredictionCard;
   //let TradingModel;
     let Correlation;
@@ -85,7 +70,6 @@ let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
   onMount(async() => {  
 
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
-    TARating = (await import('$lib/components/TARating.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;
@@ -339,10 +323,10 @@ async function historicalPrice(timePeriod:string) {
         timePeriod: timePeriod,
       };
 
-      const response = await fetch(apiURL+'/historical-price', {
+      const response = await fetch(data?.apiURL+'/historical-price', {
         method: 'POST',
         headers: {
-          "Content-Type": "application/json", "X-API-KEY": apiKey
+          "Content-Type": "application/json", "X-API-KEY": data?.apiKey
         },
         body: JSON.stringify(postData)
       });
@@ -438,10 +422,10 @@ async function initializePrice() {
   
   if(!$isOpen) {
     const postData = { ticker: $etfTicker};
-      const response = await fetch(apiURL+'/pre-post-quote', {
+      const response = await fetch(data?.apiURL+'/pre-post-quote', {
       method: 'POST',
       headers: {
-          "Content-Type": "application/json", "X-API-KEY": apiKey
+          "Content-Type": "application/json", "X-API-KEY": data?.apiKey
       },
       body: JSON.stringify(postData)
       });
@@ -692,7 +676,6 @@ async function initializePrice() {
         sectorList = [];
         correlationList = [];
         prePostData = {};
-        taRating = {};
         output = null;
   
         
@@ -708,7 +691,6 @@ async function initializePrice() {
         dividendList = data?.getStockDividend;
         similarTicker = data?.getSimilarETFs;
         previousClose = data?.getStockQuote?.previousClose
-        taRating = data?.getStockTARating;
   
         //stockDeck = data?.getStockDeckData;
         
@@ -1348,13 +1330,13 @@ async function initializePrice() {
                                       </Lazy>
                                       
           
-  
-                                    
-                                    <div class="w-full pt-10 m-auto sm:p-6 rounded-2xl {Object?.keys(taRating)?.length !== 0 ? '' : 'hidden'} ">
-                                        {#if TARating }
-                                        <TARating taRating={taRating}/>
-                                        {/if}  
-                                    </div>
+                                      <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]/+layout.server.ts b/src/routes/stocks/[tickerID]/+layout.server.ts
index 1da6b109..432e0c59 100644
--- a/src/routes/stocks/[tickerID]/+layout.server.ts
+++ b/src/routes/stocks/[tickerID]/+layout.server.ts
@@ -140,7 +140,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     fetchData(apiURL,apiKey, '/stock-correlation',params.tickerID),
     fetchData(apiURL,apiKey, '/analyst-summary-rating',params.tickerID),
     fetchData(apiURL,apiKey, '/stock-quote',params.tickerID),
-    fetchData(apiURL,apiKey, '/stock-rating',params.tickerID),
     fetchData(apiURL,apiKey, '/bull-bear-say',params.tickerID),
     fetchData(apiURL,apiKey, '/wiim',params.tickerID),
     fetchData(apiURL,apiKey, '/top-etf-ticker-holder',params.tickerID),
@@ -157,7 +156,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     getCorrelation,
     getAnalystRating,
     getStockQuote,
-    getStockTARating,
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
@@ -180,7 +178,6 @@ export const load = async ({ params, locals, cookies, setHeaders}) => {
     getCorrelation,
     getAnalystRating,
     getStockQuote,
-    getStockTARating,
     getBullBearSay,
     getWhyPriceMoved,
     getTopETFHolder,
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 9c87f4c9..5fd488f3 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/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, 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, 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';
@@ -22,7 +22,6 @@
     let similarstock = [];
     let topETFHolder = [];
     let marketMoods = {}
-    let taRating = {};
     let communitySentiment = {};
 
     $: previousClose = data?.getStockQuote?.previousClose;
@@ -42,7 +41,6 @@
   
   
   
-  let TARating;
   let StockSplits;
   let Correlation;
   let WIIM;
@@ -52,7 +50,6 @@
   onMount(async() => {
     WIIM = (await import('$lib/components/WIIM.svelte')).default;
     
-    TARating = (await import('$lib/components/TARating.svelte')).default;
     StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
     Correlation = (await import('$lib/components/Correlation.svelte')).default;
 
@@ -663,7 +660,6 @@ function changeChartType() {
       threeYearPrice = [];
       prePostData = {};
       marketMoods = {};
-      taRating = {};
       communitySentiment = {}
       output = null;
   
@@ -672,7 +668,6 @@ function changeChartType() {
       stockDeck = data?.getStockDeck;
       correlationList = data?.getCorrelation?.correlation;
       marketMoods = data?.getBullBearSay;
-      taRating = data?.getStockTARating;
       communitySentiment = data?.getCommunitySentiment;
     
       similarstock = data?.getSimilarStock;
@@ -1428,14 +1423,14 @@ function changeChartType() {
   
                                  
                               
-  
-                                  <div class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {Object?.keys(taRating)?.length !== 0 ? '' : 'hidden'} ">
-                                      {#if TARating}
-                                      <TARating taRating = {data?.getStockTARating}/>
-                                      {/if}
-                                  </div>
-  
-  
+                                  <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>
+
   
                   
                                   <!--Start DCF -->