ui fix

src/lib/components/DarkPool/HottestTrades.svelte

@@ -5,63 +5,7 @@
 
   import { abbreviateNumberWithColor } from "$lib/utils";
 
-  export let rawData = [
+  export let rawData = [];
-    {
-      date: "2024-12-27T17:52:33Z",
-      price: 31.89,
-      size: 14526,
-      volume: 6937280.0,
-      premium: "463232.6874",
-      sizeVolRatio: 0.21,
-      sizeAvgVolRatio: 0.14,
-      trackingID: 46353769264496,
-      rank: 1,
-    },
-    {
-      date: "2024-12-27T17:52:33Z",
-      price: 31.89,
-      size: 14526,
-      volume: 6937280.0,
-      premium: "463232.6874",
-      sizeVolRatio: 0.21,
-      sizeAvgVolRatio: 0.14,
-      trackingID: 46353769264496,
-      rank: 2,
-    },
-    {
-      date: "2024-12-27T18:03:31Z",
-      price: 32.0,
-      size: 12198,
-      volume: 7146904.0,
-      premium: "390336",
-      sizeVolRatio: 0.17,
-      sizeAvgVolRatio: 0.12,
-      trackingID: 47011633532241,
-      rank: 3,
-    },
-    {
-      date: "2024-12-27T18:03:31Z",
-      price: 32.0,
-      size: 12198,
-      volume: 7146904.0,
-      premium: "390336",
-      sizeVolRatio: 0.17,
-      sizeAvgVolRatio: 0.12,
-      trackingID: 47011633532241,
-      rank: 4,
-    },
-    {
-      date: "2024-12-27T20:00:53Z",
-      price: 31.78,
-      size: 7345,
-      volume: 8220987.0,
-      premium: "233424.10",
-      sizeVolRatio: 0.09,
-      sizeAvgVolRatio: 0.07,
-      trackingID: 54053503366366,
-      rank: 5,
-    },
-  ];
 
   let stockList = [];
   let isLoaded = false;

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

@@ -9,9 +9,17 @@
   import InfoModal from "$lib/components/InfoModal.svelte";
   import Infobox from "$lib/components/Infobox.svelte";
   import HottestTrades from "$lib/components/DarkPool/HottestTrades.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>
@@ -70,37 +78,42 @@
               id={"darkPoolInfo"}
             />
           </div>
-
+          {#if priceLevel?.length === 0 && hottestTrades?.length === 0 && historicalDarkPool?.length === 0}
+            <Infobox
+              text={`No Dark Pool activity are detected for ${$displayCompanyName}`}
+            />
+          {:else}
             <Infobox
               text="Track the Dark Pool Trades of major whales to monitor hidden trading activity and trends."
             />
+          {/if}
         </div>
-
+        {#if isLoaded}
+          {#if priceLevel?.length > 0}
             <PriceLevel
-          rawData={data?.getPriceLevel?.priceLevel}
+              rawData={priceLevel}
               metrics={data?.getPriceLevel?.metrics}
             />
-        <HottestTrades rawData={data?.getPriceLevel?.hottestTrades} />
+          {/if}
+          {#if hottestTrades?.length > 0}
+            <HottestTrades rawData={hottestTrades} />
+          {/if}
+          {#if historicalDarkPool?.length > 0}
             <HistoricalVolume rawData={historicalDarkPool} />
+          {/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>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>