ui fix

src/lib/components/Options/ContractLookup.svelte

@@ -24,11 +24,7 @@
   let strikeList = optionData[selectedDate] || [];
 
   let selectedStrike = strikeList?.at(0) || [];
-  let optionSymbol = buildOptionSymbol(
-    selectedDate,
-    selectedOptionType,
-    selectedStrike,
-  );
+  let optionSymbol = "n/a";
 
   let displayList = [];
   let selectGraphType = "Vol/OI";
@@ -372,12 +368,25 @@
     }
   }
 
-  onMount(async () => {
-    if (selectGraphType) {
+  async function loadData() {
     isLoaded = false;
+    optionData = data?.getData[selectedOptionType];
 
+    dateList = [...Object?.keys(optionData)];
+
+    strikeList = [...optionData[selectedDate]];
+
+    displayList = [];
+    rawDataHistory = [];
+
+    optionSymbol = buildOptionSymbol(
+      selectedDate,
+      selectedOptionType,
+      selectedStrike,
+    );
     const output = await getContractHistory(optionSymbol);
     rawDataHistory = output?.history;
+
     if (rawDataHistory?.length > 0) {
       rawDataHistory.forEach((entry) => {
         const matchingData = data?.getHistoricalPrice?.find(
@@ -397,10 +406,12 @@
     } else {
       config = null;
     }
-
     isLoaded = true;
   }
 
+  onMount(async () => {
+    await loadData();
+
     window.addEventListener("scroll", handleScroll);
     return () => {
       window.removeEventListener("scroll", handleScroll);
@@ -487,7 +498,10 @@
                     <DropdownMenu.Group class="pb-2"
                       >{#each dateList as item}
                         <DropdownMenu.Item
-                          on:click={() => (selectedDate = item)}
+                          on:click={() => {
+                            selectedDate = item;
+                            loadData();
+                          }}
                           class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
                         >
                           {formatDate(item)}
@@ -551,7 +565,10 @@
                       <!-- Added padding to avoid overlapping with Reset button -->
                       {#each strikeList as item}
                         <DropdownMenu.Item
-                          on:click={() => (selectedStrike = item)}
+                          on:click={() => {
+                            selectedStrike = item;
+                            loadData();
+                          }}
                           class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
                         >
                           {item}
@@ -614,7 +631,10 @@
                     <DropdownMenu.Group class="pb-2"
                       >{#each ["Call", "Put"] as item}
                         <DropdownMenu.Item
-                          on:click={() => (selectedOptionType = item)}
+                          on:click={() => {
+                            selectedOptionType = item;
+                            loadData();
+                          }}
                           class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
                         >
                           {item}
@@ -703,7 +723,8 @@
                 </td>
                 <td
                   class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-                  >{rawDataHistory?.at(0)?.volume || "n/a"}</td
+                  >{rawDataHistory?.at(0)?.volume?.toLocaleString("en-US") ||
+                    "n/a"}</td
                 ></tr
               >
               <tr
@@ -714,7 +735,9 @@
                 </td>
                 <td
                   class="whitespace-nowrap px-0.5 py-[1px] text-left text-sm xs:px-1 sm:py-2 sm:text-right sm:text-[1rem]"
-                  >{rawDataHistory?.at(0)?.open_interest || "n/a"}</td
+                  >{rawDataHistory
+                    ?.at(0)
+                    ?.open_interest?.toLocaleString("en-US") || "n/a"}</td
                 ></tr
               >
             </tbody>
@@ -819,8 +842,8 @@
           {/if}
         </div>
 
+        {#if isLoaded && displayList?.length > 0}
           <div class="flex justify-start items-center m-auto cursor-normal">
-          {#if isLoaded}
             <table
               class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
             >
@@ -919,20 +942,9 @@
                 {/each}
               </tbody>
             </table>
-          {:else}
-            <div class="m-auto flex justify-center items-center h-80">
-              <div class="relative">
-                <label
-                  class="bg-[#272727] 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 text-gray-400"
-                  ></span>
-                </label>
-              </div>
           </div>
         {/if}
       </div>
     </div>
   </div>
-  </div>
 </section>

src/routes/stocks/[tickerID]/options/contract-lookup/+page.server.ts

@@ -25,7 +25,7 @@ export const load = async ({ locals, params }) => {
 
 
    const getHistoricalPrice = async () => {
-     const postData = { ticker: params.tickerID, timePeriod: "max" };
+     const postData = { ticker: params.tickerID, timePeriod: "six-months" };
   const response = await fetch(apiURL + "/historical-price", {
     method: "POST",
     headers: {