From 58139798214335a74b88e50ed3e913cc33bf4f70 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 11 Jul 2024 20:19:09 +0200
Subject: [PATCH] replace loading animation && update options 0dte flow page

---
 src/lib/components/SimpleGraph.svelte         | 485 ------------------
 src/lib/components/WatchListCard.svelte       |   8 +-
 src/routes/+layout.svelte                     |   4 +-
 .../community/post/[postId]/+page.svelte      |   8 +-
 .../[tickerID]/congress-trading/+page.svelte  |  10 +-
 .../[tickerID]/congress-trading/+page.svelte  |  10 +-
 src/routes/heatmaps/+page.svelte              |  10 +-
 src/routes/hedge-funds/+page.svelte           |  10 +-
 src/routes/ipos/+page.svelte                  |   8 +-
 src/routes/ipos/[slug]/+page.svelte           |   8 +-
 src/routes/leaderboard/+page.svelte           |  10 +-
 src/routes/notifications/+page.svelte         |  10 +-
 src/routes/options-flow/+page.svelte          |  24 +-
 src/routes/options-zero-dte/+page.svelte      | 240 ++++++++-
 src/routes/politicians/+page.svelte           |  10 +-
 src/routes/politicians/flow-data/+page.svelte |  10 +-
 src/routes/portfolio/+page.svelte             |  10 +-
 src/routes/price-alert/+page.svelte           |  10 +-
 src/routes/stock-screener/+page.svelte        |   8 +-
 .../stocks/[tickerID]/insider/+page.svelte    |  10 +-
 .../insider/congress-trading/+page.svelte     |  10 +-
 .../insider/transcripts/+page.svelte          |  10 +-
 src/routes/watchlist/+page.svelte             |  10 +-
 23 files changed, 375 insertions(+), 558 deletions(-)
 delete mode 100644 src/lib/components/SimpleGraph.svelte

diff --git a/src/lib/components/SimpleGraph.svelte b/src/lib/components/SimpleGraph.svelte
deleted file mode 100644
index 85a703df..00000000
--- a/src/lib/components/SimpleGraph.svelte
+++ /dev/null
@@ -1,485 +0,0 @@
-<script lang='ts'>
-
-export let data;
-export let displaySection = 'overview';
-
-
-</script>
- 
- 
- <!-- Start Graph -->
- {#if displaySection === 'overview'}
- {#if output !== null}
- <div class = 'graph'>
- <Chart {...options} width={width} height={height} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
-     {#if displayData === '3M'}
-     <LineSeries data={filteredData.threeMonthsAgo}
-     color={colorChange}
-     lineWidth={1.5}
-     priceScaleId="left"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesReference}
-     priceLineVisible= {false}
-     >
-     <PriceLine
-       price={filteredData.threeMonthsAgo[0].value}
-       lineWidth = {1.5}
-       color="#d4d9d9"
-     />
-     <!--
-     {#if rawClassifierModel !== null}
-     <PriceLine
-       title="Prediction price"
-       price={rawClassifierModel[1][0].value}
-       lineWidth = {1.5}
-       color="#661AE6"
-       priceScaleId="left"
-     />
-     {/if}
-     -->
-     <!--Classifier Model Prediction-->
-     <!--
-     {#if rawClassifierModel !==null}
-       <PriceLine
-       price={(filteredData.threeMonthsAgo[filteredData.threeMonthsAgo.length-1].value * (1+priceChangeRangeValue/100)) }
-       lineWidth = {1.5}
-       color="#367E18"
-       title="Price rise"/>
-     {/if}
-     -->
-     </LineSeries>
-     {:else if displayData === '6M'}
-     <LineSeries data={filteredData.sixMonthsAgo}
-     color={colorChange}
-     lineWidth={1.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesReference}
-     priceLineVisible= {false}
-     >
-     <PriceLine
-       price={filteredData.sixMonthsAgo[0].value}
-       lineWidth = {1.5}
-       color="#d4d9d9"
-     />
-     </LineSeries>
-     {:else if displayData === '1y'}
-     <LineSeries data={filteredData.oneYearAgo}
-     color={colorChange}
-     lineWidth={1.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesReference}
-     priceLineVisible= {false}
-     >
-     <PriceLine
-       price={filteredData.oneYearAgo[0].value}
-       lineWidth = {1.5}
-       color="#d4d9d9"
-     />
-     </LineSeries>
-     {:else if displayData === '3y'}
-     <LineSeries data={filteredData.threeYearsAgo}
-     color={colorChange}
-     lineWidth={1.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesReference}
-     priceLineVisible= {false}
-     >
-     <PriceLine
-       price={filteredData.threeYearsAgo[0].value}
-       lineWidth = {1.5}
-       color="#d4d9d9"
-     />
-     </LineSeries>
-     {/if}
-     
-     <!--
-     <HistogramSeries
-     data={volumeData}
-     priceScaleId=""
-     priceFormat={{type: 'volume'}}
-     scaleMargins={{top: 0.8, bottom: 0}}/>
-     -->
-
-     {#if displayBBANDS}
-     <LineSeries data={bbup}
-     color="#00F13F"
-     lineWidth={1.5}
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     />
-     <LineSeries data={bbmiddle}
-     color="#00F13F"
-     lineWidth={1.5}
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     />
-     <LineSeries data={bbdown}
-     color="#00F13F"
-     lineWidth={1.5}
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     />
-     {/if}
-     
-     {#if displaySMA}
-     <LineSeries data={SMA}
-     color="#039dfc"
-     lineWidth={1.8}
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     />
-     {/if}
-
-     {#if displayEMA}
-     <LineSeries data={EMA}
-     color="#fc035a"
-     lineWidth={1.8}
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTrainData && displayData === '3M'}
-     <LineSeries data={linearRegressionTrainData.threeMonthsAgo}
-     color="#9D00A0"
-     lineWidth={4.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTrainData && displayData === '6M'}
-     <LineSeries data={linearRegressionTrainData.sixMonthsAgo}
-     color="#9D00A0"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTrainData && displayData === '1y'}
-     <LineSeries data={linearRegressionTrainData.oneYearAgo}
-     color="#9D00A0"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTrainData && displayData === '3y'}
-     <LineSeries data={linearRegressionTrainData.threeYearsAgo}
-     color="#9D00A0"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     <!--Test Data-->
-     {#if rawRegressionModel !==null && displayTestData && displayData === '3M'}
-     <LineSeries data={linearRegressionTestData.threeMonthsAgo}
-     color="#A09D00"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTestData && displayData === '6M'}
-     <LineSeries data={linearRegressionTestData.sixMonthsAgo}
-     color="#A09D00"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTestData && displayData === '1y'}
-     <LineSeries data={linearRegressionTestData.oneYearAgo}
-     color="#A09D00"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTestData && displayData === '3y'}
-     <LineSeries data={linearRegressionTestData.threeYearsAgo}
-     color="#A09D00"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-
-     <!--Pred Data-->
-     {#if rawRegressionModel !==null && displayTestData && displayData === '3M'}
-     <LineSeries data={linearRegressionPredData.threeMonthsAgo}
-     color="#4287f5"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesPredReference}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTestData && displayData === '6M'}
-     <LineSeries data={linearRegressionPredData.sixMonthsAgo}
-     color="#4287f5"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesPredReference}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTestData && displayData === '1y'}
-     <LineSeries data={linearRegressionPredData.oneYearAgo}
-     color="#4287f5"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesPredReference}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-     {#if rawRegressionModel !==null && displayTestData && displayData === '3y'}
-     <LineSeries data={linearRegressionPredData.threeYearsAgo}
-     color="#4287f5"
-     lineWidth={3.5}
-     priceScaleId="right"
-     crosshairMarkerVisible={false}
-     ref={handleSeriesPredReference}
-     priceLineVisible= {false}
-     lineStyle = {1}
-     />
-     {/if}
-
-     <!-- <TimeScale
-     fixRightEdge={fixRight} 
-     fixLeftEdge={fixLeft} 
-     on:visibleLogicalRangeChange={handleChartLogicalRangeChange}
-     ref={(ref) => timescale = ref } shiftVisibleRangeOnNewBar={false}/> -->
-     <!--Site crashes when i add timescale: Need to fix the bug ASAP -->
- </Chart>
-
- </div>
- {:else}
- <!-- else output not loaded yet-->
- <div class="graphLoading" style="width: {width}px; height: 400px;">
-   <div class="flex justify-center items-center m-auto mt-10 py-20">
-     <div class="loader">Loading...</div>
-   </div>
- </div>
- {/if}
- {/if}
- <!--End Graph-->
-
-
-
-
-
-
-
-
-  
-
-
-<style>
-   
-    .graph {
-        display:block;
-        position: relative;
-        max-width: 500px;
-        max-height: 600px;
-        overflow: hidden;
-        margin-top: auto;
-        margin-right: auto;
-        margin-left: auto;
-        border-width: thin;
-        border-color: #1A1A27;
-        background-color: #1A1A27;
-        bottom:20px;
-  
-    }
-  
-    .graphLoading {
-        display:block;
-        position: relative;
-        max-width: 500px;
-        max-height: 600px;
-        overflow: hidden;
-        margin-top: auto;
-        margin-right: auto;
-        margin-left: auto;
-        border-width: thin;
-        border-color: #1A1A27;
-        background-color: #1A1A27;
-        bottom:20px;
-    }
-  
-  .loader,
-  .loader:before,
-  .loader:after {
-    border-radius: 50%;
-    width: 2.5em;
-    height: 2.5em;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation: load7 0.8s infinite ease-in-out;
-    animation: load7 0.8s infinite ease-in-out;
-  }
-  .loader {
-    color: #ffffff;
-    font-size: 10px;
-    margin: 80px auto;
-    position: relative;
-    text-indent: -9999em;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-  .loader:before,
-  .loader:after {
-    content: '';
-    position: absolute;
-    top: 0;
-  }
-  .loader:before {
-    left: -3.5em;
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-  .loader:after {
-    left: 3.5em;
-  }
-  @-webkit-keyframes load7 {
-    0%,
-    80%,
-    100% {
-      box-shadow: 0 2.5em 0 -1.3em;
-    }
-    40% {
-      box-shadow: 0 2.5em 0 0;
-    }
-  }
-  @keyframes load7 {
-    0%,
-    80%,
-    100% {
-      box-shadow: 0 2.5em 0 -1.3em;
-    }
-    40% {
-      box-shadow: 0 2.5em 0 0;
-    }
-  }
-  
-  
-  
-  .chart-container {
-    width: 100%;
-    max-width: 800px;
-    height: 450px;
-    text-align: center;
-  }
-  
-  canvas {
-    width: 100%;
-    height: 100%;
-    max-width: 800px;
-    max-height: 450px;
-  }
-  
-  
-  
-  :root {
-    --date-picker-background: #1A1A27;
-    --date-picker-foreground: #f7f7f7;
-  }
-  
-  
-  
-  
-  .pulse {
-    position: relative;
-    animation: pulse-animation 1s forwards cubic-bezier(0.5, 0, 0.5, 1);
-  }
-  
-  @keyframes pulse-animation {
-    0% {
-      transform: scale(0.9);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(0.9);
-      opacity: 0;
-    }
-  }
-  
-  
-  
-  
-  .info-card {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-  
-      animation: fade-in 0.5s ease-out, slide-up var(--animation-delay) ease-out;
-      animation-fill-mode: both;
-      justify-content: center;
-      align-items: center;
-      z-index: 1000;
-    }
-  
-    
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-  
-    @keyframes slide-up {
-      from {
-        transform: translate(-50%, 100%);
-      }
-      to {
-        transform: translate(-50%, -50%);
-      }
-    }
-  
-    /* Hide the scrollbar when the info card is open */
-    .no-scroll {
-      overflow: hidden;
-    }
-  
-  
-    @font-face {
-      font-family: "pixel";
-      src: url("$lib/fonts/pixel.ttf");
-    }
-  
-    .pixel {
-      font-family: "pixel";
-      font-size: 0.8em;
-    }
-  
-  </style>
\ No newline at end of file
diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte
index 3b0e9639..3db8454d 100644
--- a/src/lib/components/WatchListCard.svelte
+++ b/src/lib/components/WatchListCard.svelte
@@ -543,8 +543,12 @@ if(watchList && isLoaded)
 
 
   {:else}
-  <div class="flex justify-center items-center m-auto w-full max-w-6xl">
-      <div class="loader">Loading...</div>
+  <div class="flex justify-center items-center h-80">
+      <div class="relative">
+      <label class="bg-[#202020] 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>
 
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c924fb76..b3516f07 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
   import Footer from '$lib/components/Footer.svelte';
   import Searchbar from '$lib/components/Searchbar.svelte';
   import NotificationBell from '$lib/components/NotificationBell.svelte';
-  import PullToRefresh from '$lib/components/PullToRefresh.svelte';
+  //import PullToRefresh from '$lib/components/PullToRefresh.svelte';
 
   //import DiscountBanner from '$lib/components/DiscountBanner.svelte';
   
@@ -981,9 +981,11 @@ class="fixed 2xl:block top-0 left-0 xl:left-auto w-56 sm:{collapse ? 'w-20' : 'w
   <Cookie />
   {/if}
 
+  <!--
   {#if $screenWidth < 640}
     <PullToRefresh />
   {/if}
+  -->
 
     <!--
     {#key data?.currentPath}
diff --git a/src/routes/community/post/[postId]/+page.svelte b/src/routes/community/post/[postId]/+page.svelte
index 16c71bb1..0e4b742f 100644
--- a/src/routes/community/post/[postId]/+page.svelte
+++ b/src/routes/community/post/[postId]/+page.svelte
@@ -856,9 +856,13 @@ function updateVote(postVote) {
   
       
                                       {#if !loadTextEditor}
-                                      <div class="flex  items-center m-auto relative -top-7 h-[50px] w-[100px]">
-                                          <div class="loader">Loading...</div>
+                                      <div class="flex justify-center items-center h-80">
+                                        <div class="relative">
+                                        <label class="bg-[#202020] 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>
                                       {:else}
                                           <!-- Start-Comment form -->
                                           <div class="w-full max-w-6xl mt-5">
diff --git a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
index 7f555832..264d523e 100644
--- a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
@@ -443,9 +443,13 @@ isLoaded = true;
   
 
                       {:else}
-                      <div class="flex justify-center items-center m-auto relative w-[100px]">
-                        <div class="loader">Loading...</div>
-                      </div>
+                      <div class="flex justify-center items-center h-80">
+                        <div class="relative">
+                        <label class="bg-[#202020] 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}
                     
diff --git a/src/routes/etf/[tickerID]/congress-trading/+page.svelte b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
index 9b47de4a..e71ce223 100644
--- a/src/routes/etf/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
@@ -441,9 +441,13 @@ isLoaded = true;
   
 
                       {:else}
-                      <div class="flex justify-center items-center m-auto relative w-[100px]">
-                        <div class="loader">Loading...</div>
-                      </div>
+                      <div class="flex justify-center items-center h-80">
+                        <div class="relative">
+                        <label class="bg-[#202020] 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}
                     
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index b1583617..736fff5a 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -429,9 +429,13 @@ $: {
           </div>
         </section>
         {:else}
-        <div class="flex justify-center items-center m-auto relative w-[100px]">
-          <div class="loader">Loading...</div>
-        </div>
+        <div class="flex justify-center items-center h-80">
+          <div class="relative">
+          <label class="bg-[#202020] 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}
             
diff --git a/src/routes/hedge-funds/+page.svelte b/src/routes/hedge-funds/+page.svelte
index f76454fa..a495e323 100644
--- a/src/routes/hedge-funds/+page.svelte
+++ b/src/routes/hedge-funds/+page.svelte
@@ -258,9 +258,13 @@ async function handleInput(event) {
         </div>
       </section>
       {:else}
-      <div class="flex justify-center items-center m-auto relative w-[100px]">
-        <div class="loader">Loading...</div>
-      </div>
+      <div class="flex justify-center items-center h-80">
+        <div class="relative">
+        <label class="bg-[#202020] 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}
           
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index 2bb8285a..e386699d 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -225,9 +225,13 @@
   </div>
   
     {:else}
-      <div class="flex justify-center items-center m-auto relative w-[100px]">
-        <div class="loader">Loading...</div>
+    <div class="flex justify-center items-center h-80">
+      <div class="relative">
+      <label class="bg-[#202020] 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}
   
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index aaeabf06..36dafab8 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -299,9 +299,13 @@ $: {
 </div>
 
   {:else}
-    <div class="flex justify-center items-center m-auto relative w-[100px]">
-      <div class="loader">Loading...</div>
+  <div class="flex justify-center items-center h-80">
+    <div class="relative">
+    <label class="bg-[#202020] 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}
 
diff --git a/src/routes/leaderboard/+page.svelte b/src/routes/leaderboard/+page.svelte
index 00c056b7..b4a2d1a0 100644
--- a/src/routes/leaderboard/+page.svelte
+++ b/src/routes/leaderboard/+page.svelte
@@ -508,9 +508,13 @@ async function getLeaderboard() {
 
 
       {:else}
-      <div class="w-full">
-        <div class="loader">Loading...</div>
-      </div>
+      <div class="flex justify-center items-center h-80">
+        <div class="relative">
+        <label class="bg-[#202020] 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}
     
       
diff --git a/src/routes/notifications/+page.svelte b/src/routes/notifications/+page.svelte
index 4aad3be7..10ae3260 100644
--- a/src/routes/notifications/+page.svelte
+++ b/src/routes/notifications/+page.svelte
@@ -233,9 +233,13 @@ onMount(async () => {
  
  
          {:else}
-         <div class="bg-[#202020] flex justify-center items-center m-auto w-full max-w-6xl">
-             <div class="loader">Loading...</div>
-         </div>
+         <div class="flex justify-center items-center h-80">
+          <div class="relative">
+          <label class="bg-[#202020] 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}
 
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index fe3b2c4d..7b711733 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -933,9 +933,13 @@ $: {
 
   
           {:else}
-          <div class="flex justify-center items-center m-auto w-full max-w-6xl">
-              <div class="loader">Loading...</div>
-          </div>
+          <div class="flex justify-center items-center h-80">
+            <div class="relative">
+            <label class="bg-[#202020] 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}
       </div>        
@@ -1093,10 +1097,10 @@ $: {
           <td class="">{optionSentiment}</td>
         </tr>
         <tr class="border-b border-slate-700 odd:bg-[#202020]">
-          <td class="font-semibold">Trade Count</td>
-          <td class="">{optionTradeCount}</td>
-          <td class="font-semibold">Exchange</td>
-          <td class="">{optionExchange}</td>
+          <td class="font-semibold">Execution Estimate</td>
+          <td class="">{optionExecutionEstimate}</td>
+          <td class="font-semibold"></td>
+          <td class=""></td>
         </tr>
       </tbody>
     </table>
@@ -1172,6 +1176,12 @@ $: {
           <td class="font-semibold">Exchange</td>
           <td class="">{optionExchange}</td>
         </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Execution Est.</td>
+          <td class="">{optionExecutionEstimate}</td>
+          <td class="font-semibold"></td>
+          <td class=""></td>
+        </tr>
       </tbody>
     </table>
 
diff --git a/src/routes/options-zero-dte/+page.svelte b/src/routes/options-zero-dte/+page.svelte
index 311175ad..086f68b8 100644
--- a/src/routes/options-zero-dte/+page.svelte
+++ b/src/routes/options-zero-dte/+page.svelte
@@ -1,6 +1,6 @@
 <script lang='ts'>
     import { goto } from '$app/navigation';
-    import { userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
+    import { screenWidth, userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
     import notifySound from '$lib/audio/options-flow-reader.mp3';
     import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
     import { abbreviateNumber } from '$lib/utils';
@@ -37,6 +37,23 @@
     let highestPremiumTicker;
     let highestOpenInterestTicker;
 
+  let optionSymbol;
+  let optionDescription;
+  let optionPremium;
+  let optionExpiry;
+  let optionContract;
+  let optionType;
+  let optionStrike;
+  let optionVolume;
+  let optionSpot;
+
+  let optionOpenInterest;
+  let optionSentiment;
+  let optionPrice;
+  let optionTradeCount;
+  let optionExecutionEstimate;
+  let optionExchange;
+
 
     let audio;
     let muted = true;
@@ -53,7 +70,30 @@ function toggleMode()
 {   
     mode = !mode;
 }
-    
+
+
+function handleViewData(optionData) {
+  //optionStart = optionData['Start Date'] === null ? 'n/a' : new Date(optionData['Start Date'])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' });
+  optionSymbol = optionData?.option_symbol;
+  optionDescription = optionData?.description;
+  optionPremium = abbreviateNumber(optionData?.cost_basis,true);
+  optionExpiry = reformatDate(optionData?.date_expiration);
+  optionContract = optionData?.put_call;
+  optionType = optionData?.type;
+  optionStrike = optionData?.strike_price;
+  optionVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(optionData?.volume);
+  optionSpot = optionData?.underlying_price;
+  optionOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(optionData?.open_interest);
+  optionSentiment = optionData?.sentiment;
+  optionPrice = optionData?.price;
+  optionTradeCount = optionData?.tradeCount;
+  optionExecutionEstimate = optionData?.executionEstimate;
+  optionExchange = optionData?.exchange;
+
+  const openPopup = $screenWidth < 640 ? document.getElementById("optionDetailsMobileModal") : document.getElementById("optionDetailsDesktopModal");
+  openPopup?.dispatchEvent(new MouseEvent('click'))
+
+}
     
 async function websocketRealtimeData() {
 
@@ -154,7 +194,11 @@ async function handleScroll() {
     }
 }
 
-      
+
+function reformatDate(dateString) {
+      return dateString.substring(5, 7) + '/' + dateString.substring(8) + '/' + dateString.substring(2, 4);
+  }
+  
 async function assetSelector(symbol, assetType)
 {    
     if(assetType === 'etf')
@@ -699,15 +743,15 @@ const debouncedHandleInput = debounce(handleInput, 200);
                 <tbody>
                 {#each optionList as item,index}
                 <!-- row -->
-                <tr on:click={() => assetSelector(item?.ticker, item?.assetType)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                <tr on:click={() => handleViewData(item)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                     
-                    <td class="text-white pb-3 text-xs sm:text-sm text-start">
-                    {item?.time}
-                    </td>
+                <td class="text-white pb-3 text-xs sm:text-sm text-start">
+                  {item?.time}
+                </td>
 
-                    <th class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
-                    {item?.ticker}
-                    </th>
+                <th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
+                  {item?.ticker}
+                </th>
 
                 <td class="text-white text-start">
                     {item?.strike_price}
@@ -780,9 +824,13 @@ const debouncedHandleInput = debounce(handleInput, 200);
     {/if}
 
     {:else}
-    <div class="flex justify-center items-center m-auto w-full max-w-6xl">
-        <div class="loader">Loading...</div>
-    </div>
+    <div class="flex justify-center items-center h-80">
+      <div class="relative">
+      <label class="bg-[#202020] 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}
 </div>        
@@ -790,3 +838,169 @@ const debouncedHandleInput = debounce(handleInput, 200);
 </section>
 
 
+
+
+
+
+
+
+<!--Start Options Detail Desktop Modal-->
+
+
+<!-- Put this part before </body> tag -->
+<input type="checkbox" id="optionDetailsDesktopModal" class="modal-toggle" />
+
+<label for="optionDetailsDesktopModal" class="hidden sm:modal modal-bottom sm:modal-middle cursor-pointer">
+
+  <label for="optionDetailsDesktopModal"  class="cursor-pointer modal-backdrop"></label>
+
+
+
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label class="modal-box w-full relative bg-[#202020] h-auto max-h-[900px] overflow-y-scroll">
+    <label for="optionDetailsDesktopModal" class="cursor-pointer absolute right-5 top-2 bg-[#202020] text-2xl text-white">
+      ✕
+    </label>
+
+    <p class="text-gray-200 mt-10">
+      <span class="text-white text-xl font-semibold">Order Details:</span>
+      <br>
+      {optionSymbol}
+
+    </p>
+    <p class="py-4 text-gray-200 bg-[#202020] w-full">
+      <span class="font-semibold text-white">Description:</span>
+      <br>
+      {optionDescription}
+    </p>
+
+    <table class="table table-sm table-compact bg-[#202020] w-full mt-5 mb-10 text-white">
+      <tbody>
+        <!-- row 1 -->
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Premium</td>
+          <td class="">{optionPremium}</td>
+          <td class="font-semibold">C/P</td>
+          <td class="">{optionContract}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Expiry</td>
+          <td class="">{optionExpiry}</td>
+          <td class="font-semibold">Type</td>
+          <td class="">{optionType}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Strike</td>
+          <td class="">${optionStrike}</td>
+          <td class="font-semibold">Volume</td>
+          <td class="">{optionVolume}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Spot</td>
+          <td class="">${optionSpot}</td>
+          <td class="font-semibold">Open Interest</td>
+          <td class="">{optionOpenInterest}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Price</td>
+          <td class="">${optionPrice}</td>
+          <td class="font-semibold">Sentiment</td>
+          <td class="">{optionSentiment}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Execution Estimate</td>
+          <td class="">{optionExecutionEstimate}</td>
+          <td class="font-semibold"></td>
+          <td class=""></td>
+        </tr>
+      </tbody>
+    </table>
+
+
+  </label>
+</label>
+
+
+<!--End Options Detial Desktop Modal-->
+
+  <!--Start Options Detail Modal-->
+<div class="sm:hidden drawer drawer-end z-40 overflow-hidden w-screen">
+  <input id="optionDetailsMobileModal" type="checkbox" class="drawer-toggle"/>
+  <div class="drawer-side overflow-hidden">
+  
+      
+    <div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
+
+        <label for="optionDetailsMobileModal" class="absolute left-6 top-6">
+          <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
+        </label>
+
+  
+  <div class="w-full overflow-hidden overflow-y-scroll p-2">
+
+    <p class="text-xl font-semibold text-white mt-16 p-3">
+      <span class="text-xl font-semibold">Order Details:</span>
+      <br>
+      {optionSymbol}
+    </p>
+    <p class="py-4 text-gray-200 w-full p-3">
+      <span class="font-semibold text-white">Description:</span>
+      {optionDescription}
+    </p>
+
+    <table class="table table-sm table-compact w-full mt-5 mb-10 text-white">
+      <tbody>
+        <!-- row 1 -->
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Premium</td>
+          <td class="">{optionPremium}</td>
+          <td class="font-semibold">C/P</td>
+          <td class="">{optionContract}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Expiry</td>
+          <td class="">{optionExpiry}</td>
+          <td class="font-semibold">Type</td>
+          <td class="">{optionType}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Strike</td>
+          <td class="">${optionStrike}</td>
+          <td class="font-semibold">Volume</td>
+          <td class="">{optionVolume}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Spot</td>
+          <td class="">${optionSpot}</td>
+          <td class="font-semibold">Open Interest</td>
+          <td class="">{optionOpenInterest}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Price</td>
+          <td class="">${optionPrice}</td>
+          <td class="font-semibold">Sentiment</td>
+          <td class="">{optionSentiment}</td>
+        </tr>
+        <tr class="odd:bg-[#202020]">
+          <td class="font-semibold">Trade Count</td>
+          <td class="">{optionTradeCount}</td>
+          <td class="font-semibold">Exchange</td>
+          <td class="">{optionExchange}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Execution Est.</td>
+          <td class="">{optionExecutionEstimate}</td>
+          <td class="font-semibold"></td>
+          <td class=""></td>
+        </tr>
+      </tbody>
+    </table>
+
+        
+  </div>
+
+</div>
+</div>
+</div>
+<!--End Options Detail Modal-->
+
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index b4ec5cad..a985d7fb 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -312,9 +312,13 @@ onMount(async () => {
         </div>
       </section>
       {:else}
-      <div class="flex justify-center items-center m-auto relative w-[100px]">
-        <div class="loader">Loading...</div>
-      </div>
+      <div class="flex justify-center items-center h-80">
+        <div class="relative">
+        <label class="bg-[#202020] 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}
           
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index bfb7a755..2a15b836 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -677,9 +677,13 @@
         </div>
       </section>
       {:else}
-      <div class="flex justify-center items-center m-auto relative w-[100px]">
-        <div class="loader">Loading...</div>
-      </div>
+      <div class="flex justify-center items-center h-80">
+        <div class="relative">
+        <label class="bg-[#202020] 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}
           
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 28b2d231..d2c51cd0 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -601,9 +601,13 @@ if (usRegion.includes(value)) {
       
   
     {:else}
-    <div class="flex justify-center items-center m-auto w-full max-w-6xl">
-        <div class="loader">Loading...</div>
-    </div>
+    <div class="flex justify-center items-center h-80">
+      <div class="relative">
+      <label class="bg-[#202020] 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}
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index e5d8e2d6..f33c6675 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -407,9 +407,13 @@ $: {
 
             {/if}
         {:else}
-            <div class="flex justify-center items-center m-auto h-full w-full max-w-6xl">
-                <div class="loader">Loading...</div>
-            </div>
+        <div class="flex justify-center items-center h-80">
+          <div class="relative">
+          <label class="bg-[#202020] 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}
         
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 353ba4cd..19289ab5 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -508,9 +508,13 @@ onMount(async () => {
     
       {/if}
     {:else}
-      <div class="flex justify-center items-center m-auto h-full w-full max-w-6xl">
-        <div class="loader">Loading...</div>
+    <div class="flex justify-center items-center h-80">
+      <div class="relative">
+      <label class="bg-[#202020] 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}
 
     <div class="{!data?.user ? 'hidden' : ''} sm:hidden fixed z-50 w-full h-16 max-w-3xl -right-5 bottom-5">
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 5f4ad861..197fd853 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -638,9 +638,13 @@ onMount(async() => {
 
 
                   {:else}
-                  <div class="flex justify-center items-center m-auto h-full w-full max-w-6xl">
-                      <div class="loader">Loading...</div>
-                  </div>
+                  <div class="flex justify-center items-center h-80">
+                    <div class="relative">
+                    <label class="bg-[#202020] 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}
       
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index e55285a5..9f4cd569 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -448,9 +448,13 @@ isLoaded = true;
   
 
                       {:else}
-                      <div class="flex justify-center items-center m-auto relative w-[100px]">
-                        <div class="loader">Loading...</div>
-                      </div>
+                      <div class="flex justify-center items-center h-80">
+                        <div class="relative">
+                        <label class="bg-[#202020] 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}
                     
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index aa67c6d5..3112aa73 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -254,9 +254,13 @@
   
   
                       {:else}
-                      <div class="flex justify-center items-center m-auto w-full max-w-6xl">
-                          <div class="loader">Loading...</div>
-                      </div>
+                      <div class="flex justify-center items-center h-80">
+                        <div class="relative">
+                        <label class="bg-[#202020] 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}
         
                     </div>
diff --git a/src/routes/watchlist/+page.svelte b/src/routes/watchlist/+page.svelte
index fd87380b..74d5a910 100644
--- a/src/routes/watchlist/+page.svelte
+++ b/src/routes/watchlist/+page.svelte
@@ -508,9 +508,13 @@ onDestroy( () => {
         
         {/if}
     {:else}
-        <div class="flex justify-center items-center m-auto h-full w-full max-w-6xl">
-            <div class="loader">Loading...</div>
-        </div>
+    <div class="flex justify-center items-center h-80">
+      <div class="relative">
+      <label class="bg-[#202020] 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}