seo optimization

src/lib/components/DarkPool/HistoricalVolume.svelte

@@ -2,7 +2,7 @@
   import { displayCompanyName, stockTicker, etfTicker } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import { Chart } from "svelte-echarts";
-  import { abbreviateNumber, formatDateRange } from "$lib/utils";
+  import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils";
   import { init, use } from "echarts/core";
   import { LineChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
@@ -12,7 +12,6 @@
 
   export let rawData = [];
 
-  let isLoaded = false;
   let optionsData;
   let avgVolume = 0;
   let avgShortVolume = 0;
@@ -110,12 +109,24 @@
         top: "5%",
         containLabel: true,
       },
-      xAxis: {
+      xAxis: [
+        {
           type: "category",
-        boundaryGap: false,
           data: dates,
-        axisLabel: { color: "#fff" },
+          axisLabel: {
+            color: "#fff",
+
+            formatter: function (value) {
+              // Assuming dates are in the format 'yyyy-mm-dd'
+              const dateParts = value.split("-");
+              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+              const year = parseInt(dateParts[0]);
+              const day = parseInt(dateParts[2]);
+              return `${day} ${monthNames[monthIndex]} ${year}`;
             },
+          },
+        },
+      ],
       yAxis: [
         {
           type: "value",
@@ -143,10 +154,8 @@
     };
   }
 
-  $: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) {
-    isLoaded = false;
+  $: if ($stockTicker || $etfTicker) {
     optionsData = getPlotOptions();
-    isLoaded = true;
   }
 </script>
 
@@ -166,7 +175,6 @@
       />
     </div>
 
-    {#if isLoaded}
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
         <div class="text-white text-[1rem] mt-2 mb-2 w-full">
@@ -174,8 +182,7 @@
           dark pool trading volume of
           <span class="font-semibold">{abbreviateNumber(avgVolume)}</span>
           shares. Out of this total, an average of
-            <span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span
-            >
+          <span class="font-semibold">{abbreviateNumber(avgShortVolume)}</span>
           shares, constituting approximately
           <span class="font-semibold"
             >{((avgShortVolume / avgVolume) * 100)?.toFixed(2)}%</span
@@ -260,7 +267,7 @@
                 <span>Total Volume</span>
               </td>
               <td
-                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
+                class="text-sm sm:text-[1rem] px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2"
               >
                 {monthlyVolume}
               </td>
@@ -272,7 +279,7 @@
                 <span>Avg. Short % of Volume</span>
               </td>
               <td
-                  class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
+                class="text-sm sm:text-[1rem] px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2"
               >
                 {avgMonthlyShort}%
               </td>
@@ -281,18 +288,6 @@
         </table>
       </div>
     {/if}
-    {:else}
-      <div class="flex justify-center items-center h-80">
-        <div class="relative">
-          <label
-            class="bg-secondary rounded-md 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 text-gray-400"
-            ></span>
-          </label>
-        </div>
-      </div>
-    {/if}
   </main>
 </section>
 

src/lib/components/DarkPool/HottestTrades.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { stockTicker, etfTicker } from "$lib/store";
   import InfoModal from "$lib/components/InfoModal.svelte";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
@@ -8,8 +7,7 @@
   export let data;
   export let rawData = [];
 
-  let stockList = [];
-  let isLoaded = false;
+  let stockList = rawData || [];
 
   function formatToNewYorkTime(isoString) {
     const date = new Date(isoString);
@@ -120,12 +118,6 @@
     // Sort using the generic comparison function
     stockList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
-
-  $: if (typeof window !== "undefined" && ($stockTicker || $etfTicker)) {
-    isLoaded = false;
-    stockList = rawData;
-    isLoaded = true;
-  }
 </script>
 
 <section class="overflow-hidden text-white h-full pb-8">
@@ -144,7 +136,6 @@
       />
     </div>
 
-    {#if isLoaded}
     {#if rawData?.length !== 0}
       <div class="w-full flex flex-col items-start">
         <div class="text-white text-[1rem] mt-2 mb-2 w-full">
@@ -204,11 +195,7 @@
                 </td>
 
                 <td class="text-sm sm:text-[1rem] text-end">
-                    {@html abbreviateNumberWithColor(
-                      item?.premium,
-                      false,
-                      true,
-                    )}
+                  {@html abbreviateNumberWithColor(item?.premium, false, true)}
                 </td>
               </tr>
             {/each}
@@ -216,17 +203,5 @@
         </table>
       </div>
     {/if}
-    {:else}
-      <div class="flex justify-center items-center h-80">
-        <div class="relative">
-          <label
-            class="bg-secondary rounded-md 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 text-gray-400"
-            ></span>
-          </label>
-        </div>
-      </div>
-    {/if}
   </main>
 </section>

src/lib/components/DarkPool/PriceLevel.svelte

@@ -15,7 +15,6 @@
   export let rawData = [];
   export let metrics = {};
 
-  let isLoaded = false;
   let optionsData;
 
   function getPlotOptions(category) {
@@ -105,14 +104,8 @@
     return options;
   }
 
-  $: if (
-    typeof window !== "undefined" &&
-    ($stockTicker || $etfTicker) &&
-    category
-  ) {
-    isLoaded = false;
+  $: if (($stockTicker || $etfTicker) && category) {
     optionsData = getPlotOptions(category);
-    isLoaded = true;
   }
 </script>
 
@@ -132,7 +125,6 @@
       />
     </div>
 
-    {#if isLoaded}
     {#if rawData?.length !== 0 && Object?.keys(metrics)?.length > 0}
       <div class="w-full flex flex-col items-start">
         <div class="text-white text-[1rem] mt-2 mb-2 w-full">
@@ -173,18 +165,6 @@
         </div>
       </div>
     {/if}
-    {:else}
-      <div class="flex justify-center items-center h-80">
-        <div class="relative">
-          <label
-            class="bg-secondary rounded-md 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 text-gray-400"
-            ></span>
-          </label>
-        </div>
-      </div>
-    {/if}
   </main>
 </section>
 

src/lib/components/FailToDeliver.svelte

@@ -170,7 +170,7 @@
 
   $: {
     const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
-    if (ticker && typeof window !== "undefined") {
+    if (ticker) {
       isLoaded = false;
       console.log(rawData);
       if (rawData?.length > 0) {

src/routes/+page.svelte

@@ -11,7 +11,7 @@
   import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
   import Infobox from "$lib/components/Infobox.svelte";
   import { closedPWA } from "$lib/store";
-  import { options } from "marked";
+  import Feedback from "$lib/components/Feedback.svelte";
 
   export let data;
   let optionsMode = "openInterest";
@@ -32,7 +32,6 @@
       optionsTable = data?.getDashboard?.optionsData?.openInterest || [];
     }
   }
-  let Feedback;
   let pwaInstalled = false;
   let AppInstalled = null;
 
@@ -64,8 +63,6 @@
         console.error("Error loading AppInstalled component:", e);
       }
     }
-
-    Feedback = (await import("$lib/components/Feedback.svelte")).default;
   });
 
   $: charNumber = $screenWidth < 640 ? 20 : 15;
@@ -165,9 +162,7 @@
 
   <div class="flex flex-col m-auto justify-center items-center">
     <div class="text-center mb-10 w-full px-4 sm:px-3 mt-10">
-      {#if Feedback}
       <Feedback {data} />
-      {/if}
       <!--
       <div class="text-center mb-10 relative w-fit flex justify-center m-auto">
         <a

src/routes/etf/etf-providers/[slug]/+page.svelte

@@ -176,7 +176,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Listed Funds</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {rawData?.length}
         </div>
@@ -186,7 +186,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Total Assets</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalAssets)}
         </div>
@@ -196,7 +196,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-[1rem] font-normal text-white">Average Cost</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {avgExpenseRatio?.toFixed(2)}%
         </div>

src/routes/list/bitcoin-etfs/+page.svelte

@@ -113,7 +113,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total ETFs</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -123,7 +123,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Assets</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalAssets)}
         </div>
@@ -133,7 +133,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Avg. Cost</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {avgExpenseRatio?.toFixed(2)}%
         </div>

src/routes/list/country/[slug]/+page.svelte

@@ -40,7 +40,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -50,7 +50,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -60,7 +60,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/exchange/[slug]/+page.svelte

@@ -35,7 +35,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -45,7 +45,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -55,7 +55,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/faang/+page.svelte

@@ -25,7 +25,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -35,7 +35,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -45,7 +45,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/index/[slug]/+page.svelte

@@ -36,7 +36,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -46,7 +46,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -56,7 +56,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/industry/[slug]/+page.svelte

@@ -32,7 +32,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -42,7 +42,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -52,7 +52,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/magnificent-seven/+page.svelte

@@ -26,7 +26,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -36,7 +36,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -46,7 +46,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/market-cap/[slug]/+page.svelte

@@ -122,7 +122,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -132,7 +132,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -142,7 +142,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/list/sector/[slug]/+page.svelte

@@ -30,7 +30,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Stocks</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {new Intl.NumberFormat("en")?.format(rawData?.length)}
         </div>
@@ -40,7 +40,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Market Cap</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalMarketCap)}
         </div>
@@ -50,7 +50,7 @@
       <div class="flex items-center justify-between sm:block">
         <div class="text-sm font-semibold text-white">Total Revenue</div>
         <div
-          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+          class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
         >
           {abbreviateNumber(totalRevenue)}
         </div>

src/routes/stocks/[tickerID]/dark-pool/+page.svelte

@@ -10,16 +10,11 @@
   import Infobox from "$lib/components/Infobox.svelte";
   import HottestTrades from "$lib/components/DarkPool/HottestTrades.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
-  import { onMount } from "svelte";
 
   export let data;
   let historicalDarkPool = data?.getHistoricalDarkPool || [];
   let priceLevel = data?.getPriceLevel?.priceLevel || [];
   let hottestTrades = data?.getPriceLevel?.hottestTrades || [];
-  let isLoaded = false;
-  onMount(() => {
-    isLoaded = true;
-  });
 </script>
 
 <svelte:head>
@@ -88,7 +83,6 @@
             />
           {/if}
         </div>
-        {#if isLoaded}
         {#if priceLevel?.length > 0}
           <PriceLevel
             rawData={priceLevel}
@@ -105,18 +99,6 @@
         {:else}
           <UpgradeToPro {data} />
         {/if}
-        {:else}
-          <div class="flex justify-center items-center h-80">
-            <div class="relative">
-              <label
-                class="bg-secondary rounded-md 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 text-gray-400"
-                ></span>
-              </label>
-            </div>
-          </div>
-        {/if}
       </div>
     </div>
   </div>

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -316,7 +316,7 @@
             <div class="text-[1rem] font-normal text-white">Total Analysts</div>
 
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+              class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
             >
               {numOfAnalyst}
             </div>
@@ -326,7 +326,7 @@
               Consensus Rating
             </div>
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+              class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
             >
               {consensusRating}
             </div>
@@ -334,7 +334,7 @@
           <div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0">
             <div class="text-[1rem] font-normal text-white">Price Target</div>
             <div
-              class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+              class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
             >
               {priceTarget !== null && priceTarget !== undefined
                 ? priceTarget
@@ -346,7 +346,7 @@
           >
             <div class="text-[1rem] font-normal text-white">Upside</div>
             <div
-              class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changesPercentage >=
+              class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changesPercentage >=
               0
                 ? "before:content-['+'] after:content-['%'] text-[#00FC50]"
                 : changesPercentage < 0

src/routes/stocks/[tickerID]/history/+page.svelte

@@ -14,7 +14,6 @@
   import { onMount } from "svelte";
 
   export let data;
-  let isLoaded = false;
   let timePeriod = "Daily";
   let rawData = data?.getData || [];
   let originalData = [];
@@ -262,13 +261,10 @@
   }
 
   $: {
-    if (timePeriod && typeof window !== "undefined") {
-      isLoaded = false;
+    if (timePeriod) {
       rawData = prepareDataset(data?.getData, timePeriod);
       originalData = rawData;
       stockList = rawData?.slice(0, 50);
-      console.log(rawData);
-      isLoaded = true;
     }
   }
 </script>
@@ -437,7 +433,6 @@
                 </Button>
               </div>
             </div>
-            {#if isLoaded}
             {#if rawData?.length !== 0}
               <div class="w-full m-auto mt-2">
                 <div
@@ -535,19 +530,6 @@
                 text={`No price history are available for ${$displayCompanyName}.`}
               />
             {/if}
-            {:else}
-              <div class="flex justify-center items-center h-80">
-                <div class="relative">
-                  <label
-                    class="bg-secondary rounded-md 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 text-gray-400"
-                    ></span>
-                  </label>
-                </div>
-              </div>
-            {/if}
           </div>
         </main>
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">

src/routes/stocks/[tickerID]/insider/+layout.svelte

@@ -42,7 +42,6 @@
     const sectionMap = {
       institute: "institute",
       "congress-trading": "congress-trading",
-      transcripts: "transcripts",
     };
 
     const foundSection = parts?.find((part) =>
@@ -59,7 +58,6 @@
     const subSectionMap = {
       "congress-trading": "/insider/congress-trading",
       institute: "/insider/institute",
-      transcripts: "/insider/transcripts",
     };
 
     if (state !== "insider" && subSectionMap[state]) {
@@ -114,16 +112,6 @@
               >
                 Congress Trading
               </a>
-              <a
-                href={`/stocks/${$stockTicker}/insider/transcripts`}
-                on:click={() => changeSubSection("transcripts")}
-                class="p-2 px-5 cursor-pointer {displaySubSection ===
-                'transcripts'
-                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
-              >
-                Transcripts
-              </a>
             </ul>
           </nav>
 

src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte

@@ -8,6 +8,7 @@
   import { getPartyForPoliticians } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -15,48 +16,8 @@
   let buySellRatio = 0;
   let partyRatio = 0;
   let senateTradingList = [];
-  let isLoaded = false;
 
-  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
-
-  function getAbbreviatedName(fullName) {
-    if (fullName === null) {
-      return "-";
-    }
-
-    const names = fullName?.split(" ");
-    let firstName = names[0];
-    // Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
-    if (names.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i.test(names[0])) {
-      firstName = names[1];
-      names?.splice(0, 1);
-    }
-    const initials = names
-      ?.slice(0, -1)
-      ?.map((name) => name?.charAt(0))
-      ?.join(". ");
-    const lastName = names[names?.length - 1];
-    return `${firstName?.charAt(0)}. ${lastName}`;
-  }
-
-  function backToTop() {
-    window.scrollTo({
-      top: 0,
-    });
-  }
-
-  async function handleScroll() {
-    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-    if (isBottom && senateTradingList?.length !== rawData?.length) {
-      const nextIndex = senateTradingList?.length;
-      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      senateTradingList = [...senateTradingList, ...filteredNewResults];
-    }
-  }
-
-  onMount(async () => {
-    rawData.forEach((item) => {
+  rawData?.forEach((item) => {
     const representative = item?.representative || "";
     const fullName = representative
       .replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
@@ -96,10 +57,44 @@
         ? 0
         : typeCounts["Bought"] / typeCounts["Sold"];
 
-    senateTradingList = rawData.slice(0, 20) ?? [];
+  senateTradingList = rawData.slice(0, 50) ?? [];
 
-    isLoaded = true;
+  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
+  function getAbbreviatedName(fullName) {
+    if (fullName === null) {
+      return "-";
+    }
+
+    const names = fullName?.split(" ");
+    let firstName = names[0];
+    // Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
+    if (names.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i.test(names[0])) {
+      firstName = names[1];
+      names?.splice(0, 1);
+    }
+
+    const lastName = names[names?.length - 1];
+    return `${firstName?.charAt(0)}. ${lastName}`;
+  }
+
+  function backToTop() {
+    window.scrollTo({
+      top: 0,
+    });
+  }
+
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && senateTradingList?.length !== rawData?.length) {
+      const nextIndex = senateTradingList?.length;
+      const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+      senateTradingList = [...senateTradingList, ...filteredNewResults];
+    }
+  }
+
+  onMount(async () => {
     window.addEventListener("scroll", handleScroll);
     return () => {
       window.removeEventListener("scroll", handleScroll);
@@ -233,7 +228,6 @@
             Congress Trading
           </h1>
 
-          {#if isLoaded}
           {#if senateTradingList?.length !== 0}
             <!--Start Widget-->
             <div
@@ -471,24 +465,7 @@
               </label>
             {/if}
           {:else}
-              <h2
-                class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
-              >
-                No trading history available for {$displayCompanyName}. Likely
-                no corrupt politican has interest in this stock.
-              </h2>
-            {/if}
-          {:else}
-            <div class="flex justify-center items-center h-80">
-              <div class="relative">
-                <label
-                  class="bg-secondary rounded-md 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 text-gray-400"
-                  ></span>
-                </label>
-              </div>
-            </div>
+            <Infobox text="No data available" />
           {/if}
         </div>
       </div>

src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte

@@ -1,334 +0,0 @@
-<script lang="ts">
-  import {
-    stockTicker,
-    getCache,
-    setCache,
-    displayCompanyName,
-    numberOfUnreadNotification,
-  } from "$lib/store";
-  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
-  import { Button } from "$lib/components/shadcn/button/index.js";
-  import Infobox from "$lib/components/Infobox.svelte";
-  import { onMount } from "svelte";
-
-  let chats = [];
-  let date;
-
-  const now = new Date();
-  let year = now.getFullYear();
-  let quarter = Math.floor(now.getMonth() / 3) + 1;
-  let yearRange = ["2024", "2023", "2022", "2021"];
-  let displayQuarter = quarter;
-  let displayYear = year;
-  let isLoaded = false;
-
-  function backToTop() {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-  }
-
-  const getTranscripts = async () => {
-    isLoaded = false;
-    chats = [];
-    let output;
-    // Get cached data for the specific tickerID
-    const cachedData = getCache(
-      `${$stockTicker}-Q-${quarter}-${year}`,
-      "getTranscripts",
-    );
-    if (cachedData) {
-      output = cachedData;
-    } else {
-      const postData = {
-        ticker: $stockTicker,
-        quarter: quarter,
-        year: year,
-      };
-      // make the POST request to the endpoint
-      const response = await fetch("/api/earnings-call-transcripts", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(postData),
-      });
-
-      output = await response.json();
-      // Cache the data for this specific tickerID with a specific name 'getTranscripts'
-      setCache(
-        `${$stockTicker}-Q-${quarter}-${year}`,
-        output,
-        "getTranscripts",
-      );
-    }
-
-    chats = output?.chat ?? [];
-    date = output?.date ?? "-";
-    displayQuarter = quarter;
-    displayYear = year;
-    isLoaded = true;
-  };
-
-  onMount(async () => {
-    await getTranscripts();
-  });
-</script>
-
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) · Q{quarter}
-    {year} · Earnings Call Transcript · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
-<section
-  class="w-full bg-default overflow-hidden text-white min-h-screen mb-40 sm:mb-0"
->
-  <div class="h-full overflow-hidden">
-    <div class="relative flex justify-center items-center overflow-hidden">
-      <div class="sm:p-7 w-full mt-2 sm:mt-0">
-        <div class="mb-6">
-          <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
-            Transcripts
-          </h1>
-
-          <div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
-            <div class="relative inline-block text-left grow">
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild let:builder>
-                  <Button
-                    builders={[builder]}
-                    class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
-                  >
-                    <span class="truncate text-white">Year: {year}</span>
-                    <svg
-                      class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      style="max-width:40px"
-                      aria-hidden="true"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                        clip-rule="evenodd"
-                      ></path>
-                    </svg>
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content
-                  class="w-56 h-fit max-h-72 overflow-y-auto scroller"
-                >
-                  <DropdownMenu.Label class="text-gray-400">
-                    Select Year
-                  </DropdownMenu.Label>
-                  <DropdownMenu.Separator />
-                  <DropdownMenu.Group>
-                    {#each yearRange as index}
-                      <DropdownMenu.Item
-                        on:click={() => {
-                          year = index;
-                          getTranscripts();
-                        }}
-                        class="cursor-pointer hover:bg-primary"
-                      >
-                        {index}
-                      </DropdownMenu.Item>
-                    {/each}
-                  </DropdownMenu.Group>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </div>
-            <div class="relative inline-block text-left grow ml-3">
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild let:builder>
-                  <Button
-                    builders={[builder]}
-                    class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
-                  >
-                    <span class="truncate text-white">Quarter: Q{quarter}</span>
-                    <svg
-                      class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      style="max-width:40px"
-                      aria-hidden="true"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                        clip-rule="evenodd"
-                      ></path>
-                    </svg>
-                  </Button>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content
-                  class="w-56 h-fit max-h-72 overflow-y-auto scroller"
-                >
-                  <DropdownMenu.Label class="text-gray-400">
-                    Select Quarter
-                  </DropdownMenu.Label>
-                  <DropdownMenu.Separator />
-                  <DropdownMenu.Group>
-                    {#each [1, 2, 3, 4] as index}
-                      <DropdownMenu.Item
-                        on:click={() => {
-                          quarter = index;
-                          getTranscripts();
-                        }}
-                        class="cursor-pointer hover:bg-primary"
-                      >
-                        Q{index}
-                      </DropdownMenu.Item>
-                    {/each}
-                  </DropdownMenu.Group>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </div>
-          </div>
-        </div>
-
-        {#if isLoaded}
-          {#if chats?.length !== 0}
-            <div class="flex flex-col sm:flex-row items-center pt-5 pb-5">
-              <span class="text-white text-md">
-                Q{displayQuarter}
-                {displayYear} · Earnings Call Transcript
-              </span>
-              <span
-                class="text-white text-opacity-80 text-md mt-2 sm:mt-0 sm:ml-auto"
-              >
-                {new Date(date).toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                })}
-              </span>
-            </div>
-
-            {#each chats as item}
-              {#if item?.name === "Operator"}
-                <div class="flex flex-col items-start gap-2.5 mt-5">
-                  <div class="flex flex-row items-center ml-auto mr-2">
-                    <div
-                      class="flex items-center space-x-2 rtl:space-x-reverse"
-                    >
-                      <span class="text-sm text-base">
-                        {item?.name}
-                      </span>
-                    </div>
-                    <div
-                      class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative border border-gray-600 bg-default bg-opacity-[0.6] flex items-center justify-center"
-                    >
-                      <svg
-                        class="w-6 h-6 sm:w-7 sm:h-7"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        ><path
-                          fill="#fff"
-                          d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z"
-                        /></svg
-                      >
-                    </div>
-                  </div>
-                  <div
-                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-primary rounded-l-xl rounded-tr-xl"
-                  >
-                    <p class="text-sm font-normal py-2.5 text-gray-200">
-                      {@html item?.description}
-                    </p>
-                  </div>
-                </div>
-              {:else}
-                <div class="flex flex-col items-start gap-2.5 mt-8">
-                  <div class="flex flex-row items-center">
-                    <div
-                      class="avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-red-600 bg-opacity-[0.6] flex items-center justify-center text-white text-sm sm:text-base"
-                    >
-                      <span
-                        class="absolute inset-0 flex items-center justify-center"
-                      >
-                        {item?.name?.slice(0, 1)}
-                      </span>
-                    </div>
-                    <div
-                      class="ml-2 flex items-center space-x-2 rtl:space-x-reverse"
-                    >
-                      <span class="text-sm text-base">
-                        {item?.name}
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-secondary rounded-r-xl rounded-tl-xl"
-                  >
-                    <p class="text-sm font-normal py-2.5 text-gray-200">
-                      {@html item?.description}
-                    </p>
-                  </div>
-                </div>
-              {/if}
-            {/each}
-
-            <label
-              on:click={backToTop}
-              class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
-            >
-              Back to top
-            </label>
-          {:else}
-            <div class="pt-5">
-              <Infobox
-                text={`No transcript available for ${$displayCompanyName} for the Q${displayQuarter} of ${displayYear}`}
-              />
-            </div>
-          {/if}
-        {:else}
-          <div class="flex justify-center items-center h-80">
-            <div class="relative">
-              <label
-                class="bg-secondary rounded-md 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 text-gray-400"
-                ></span>
-              </label>
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
-</section>

src/routes/stocks/[tickerID]/metrics/+page.svelte

@@ -5,6 +5,7 @@
     stockTicker,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -338,29 +339,9 @@
             </div>
           {/if}
         {:else}
-          <div
-            class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
-          >
-            <svg
-              class="h-6 w-6 hidden sm:block"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              style="max-width:40px"
-              aria-hidden="true"
-              ><path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clip-rule="evenodd"
-              ></path></svg
-            >
-            <div class="ml-3 w-full">
-              <div class="flex w-full flex-row justify-between">
-                <div>
-                  Currently, there are no business metrics available for {$stockTicker}.
-                </div>
-              </div>
-            </div>
-          </div>
+          <Infobox
+            text={`Currently, there are no business metrics available for ${$stockTicker}.`}
+          />
         {/if}
       </div>
     </div>

src/routes/stocks/[tickerID]/statistics/employees/+page.svelte

@@ -628,7 +628,7 @@
 
           <div class="w-full overflow-x-scroll">
             <table
-              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto mt-4"
+              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
             >
               <thead class="bg-default">
                 <tr>

src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte

@@ -5,14 +5,11 @@
     stockTicker,
   } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
-
-  import { onMount } from "svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
   import FailToDeliver from "$lib/components/FailToDeliver.svelte";
 
   export let data;
 
-  let isLoaded = false;
-
   let rawData = data?.getData || [];
   let changePercentageYearAgo = 0;
   let relativeFTD =
@@ -60,10 +57,7 @@
     return change;
   }
 
-  onMount(async () => {
   changePercentageYearAgo = computeYearOverYearChange(rawData);
-    isLoaded = true;
-  });
 </script>
 
 <svelte:head>
@@ -104,7 +98,6 @@
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      {#if isLoaded}
       <main class="w-full">
         <div class="sm:p-7 m-auto mt-2 sm:mt-0">
           <div class="mb-3">
@@ -124,7 +117,7 @@
                       FTD Shares
                     </div>
                     <div
-                        class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
                     >
                       {abbreviateNumber(
                         rawData?.slice(-1)?.at(0)?.failToDeliver,
@@ -139,7 +132,7 @@
                       FTD / Avg Volume
                     </div>
                     <div
-                        class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
                     >
                       {relativeFTD > 0.01
                         ? relativeFTD + "%"
@@ -155,7 +148,7 @@
                       1-Year Change
                     </div>
                     <div
-                        class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >=
+                      class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >=
                         0 && changePercentageYearAgo !== null
                         ? "before:content-['+'] text-[#00FC50]"
                         : changePercentageYearAgo < 0 &&
@@ -176,26 +169,10 @@
               <FailToDeliver {data} {rawData} />
             </div>
           {:else}
-              <h2
-                class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto"
-              >
-                No data available
-              </h2>
+            <Infobox text="No data available" />
           {/if}
         </div>
       </main>
-      {:else}
-        <div class="w-full flex justify-center items-center h-80">
-          <div class="relative">
-            <label
-              class="bg-odd rounded-md 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 text-gray-400"
-              ></span>
-            </label>
-          </div>
-        </div>
-      {/if}
     </div>
   </div>
 </section>

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -15,13 +15,11 @@
   import { LineChart, BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
-  import { onMount } from "svelte";
   import Infobox from "$lib/components/Infobox.svelte";
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
 
-  let isLoaded = false;
   let optionsData;
 
   let rawData = data?.getHistoricalMarketCap || [];
@@ -201,13 +199,10 @@
     tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
   }
 
-  onMount(async () => {
-    optionsData = await plotData();
+  optionsData = plotData();
   tableList = filterEndOfYearDates(rawData);
   tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
   changePercentageYearAgo = computeYearOverYearChange(rawData);
-    isLoaded = true;
-  });
 
   async function changeStatement(state) {
     timePeriod = state;
@@ -265,7 +260,7 @@
     return { dates, marketCapList };
   }
 
-  async function plotData() {
+  function plotData() {
     const filteredData = filterDataByTimePeriod(rawData, timePeriod);
 
     const options = {
@@ -277,13 +272,24 @@
         top: "10%",
         containLabel: true,
       },
-      xAxis: {
+      xAxis: [
+        {
+          type: "category",
+          data: filteredData?.dates,
           axisLabel: {
             color: "#fff",
+
+            formatter: function (value) {
+              // Assuming dates are in the format 'yyyy-mm-dd'
+              const dateParts = value.split("-");
+              const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+              const year = parseInt(dateParts[0]);
+              const day = parseInt(dateParts[2]);
+              return `${day} ${monthNames[monthIndex]} ${year}`;
             },
-        data: filteredData?.dates,
-        type: "category",
           },
+        },
+      ],
       yAxis: [
         {
           type: "value",
@@ -422,13 +428,10 @@
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
-      {#if isLoaded}
       <main class="w-full">
         <div class="sm:p-7 m-auto mt-2 sm:mt-0">
           <div class="mb-3">
-              <h1 class="text-xl sm:text-2xl text-white font-bold">
-                Market Cap
-              </h1>
+            <h1 class="text-xl sm:text-2xl text-white font-bold">Market Cap</h1>
           </div>
 
           {#if rawData?.length !== 0}
@@ -461,7 +464,7 @@
                       Market Cap
                     </div>
                     <div
-                        class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
                     >
                       {@html abbreviateNumber(
                         data?.getStockQuote?.marketCap,
@@ -473,11 +476,9 @@
                 </div>
                 <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
                   <div class="flex items-center justify-between sm:block">
-                      <div class="text-sm font-semibold text-white">
-                        Category
-                      </div>
+                    <div class="text-sm font-semibold text-white">Category</div>
                     <div
-                        class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+                      class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
                     >
                       {#if capCategory}
                         <a
@@ -498,7 +499,7 @@
                       1-Year Change
                     </div>
                     <div
-                        class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >=
+                      class="mt-1 break-words font-semibold leading-8 text-[1rem] sm:text-lg {changePercentageYearAgo >=
                         0 && changePercentageYearAgo !== null
                         ? "before:content-['+'] text-[#00FC50]"
                         : changePercentageYearAgo < 0 &&
@@ -517,9 +518,7 @@
               </div>
 
               <div class="flex flex-row items-center w-full mt-10 mb-8">
-                  <h1 class="text-2xl text-white font-bold">
-                    Market Cap Chart
-                  </h1>
+                <h1 class="text-2xl text-white font-bold">Market Cap Chart</h1>
                 <div
                   class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
                 >
@@ -530,8 +529,7 @@
                           builders={[builder]}
                           class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                         >
-                            <span class="truncate text-white">{timePeriod}</span
-                            >
+                          <span class="truncate text-white">{timePeriod}</span>
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                             viewBox="0 0 20 20"
@@ -625,12 +623,12 @@
                 <Chart {init} options={optionsData} class="chart" />
               </div>
 
-                <h2 class="mt-10 text-xl text-gray-200 font-bold">
+              <h2 class="mt-10 text-xl text-white font-bold">
                 Market Cap History
               </h2>
 
               <div
-                  class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mb-6"
+                class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
               >
                 <div
                   class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
@@ -713,11 +711,7 @@
                         <td
                           class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
                         >
-                            {@html abbreviateNumber(
-                              item?.marketCap,
-                              false,
-                              true,
-                            )}
+                          {@html abbreviateNumber(item?.marketCap, false, true)}
                         </td>
 
                         <td
@@ -755,26 +749,10 @@
               </div>
             </div>
           {:else}
-              <h2
-                class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto"
-              >
-                No data available
-              </h2>
+            <Infobox text="No data available" />
           {/if}
         </div>
       </main>
-      {:else}
-        <div class="w-full flex justify-center items-center h-80">
-          <div class="relative">
-            <label
-              class="bg-odd rounded-md 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 text-gray-400"
-              ></span>
-            </label>
-          </div>
-        </div>
-      {/if}
     </div>
   </div>
 </section>