ui fix

src/routes/options-flow/+page.svelte

@@ -48,6 +48,7 @@
   let isLoaded = false;
   let mode = $isOpen === true ? true : false;
   let showMore = false;
+  let newIncomingData = false;
   
   let optionSymbol;
   let optionDescription;
@@ -111,11 +112,15 @@ function handleViewData(optionData) {
   
   
   socket.addEventListener('message', (event) => {
-      const newData = event.data;
       previousCallVolume = displayCallVolume ?? 0;
       if(mode === true) {
       try {
-          rawData = [...JSON?.parse(newData)];
+          const newData = JSON.parse(event.data);
+          if(rawData?.length !== newData?.length) {
+            newIncomingData = true;
+          }
+
+          rawData = [...newData];
           
 
           // Variables to track filter status
@@ -142,11 +147,16 @@ function handleViewData(optionData) {
           }
 
           // Update optionList and notFound status
-          if (rawData?.length !== 0) {
+          if (rawData?.length !== 0 && newIncomingData === true) {
               notFound = false;
+              newIncomingData = false;
               optionList = rawData?.slice(0, 20);
+          } else if (!newIncomingData) {
+              notFound = false;
+              newIncomingData = false;
           } else {
               notFound = true;
+              newIncomingData = false;
               rawData = data?.getOptionsFlowFeed ?? [];
               optionList = [];
           }

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

@@ -47,40 +47,22 @@ const putOpenInterestList = data?.getOptionsPlotData?.putOpenInterestList;
 
 
 
-function formatTime(timestamp) {
+function formatDate(dateStr) {
-  // Convert timestamp to milliseconds
+  // Parse the input date string (YYYY-mm-dd)
-  var date = new Date(timestamp * 1000);
+  var date = new Date(dateStr);
-
-  // hours, minutes, and seconds
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
-  var seconds = date.getSeconds();
-
-  hours = (hours < 10 ? "0" : "") + hours;
-  minutes = (minutes < 10 ? "0" : "") + minutes;
-  seconds = (seconds < 10 ? "0" : "") + seconds;
-
-  // Format the date string
-  var formattedDate = hours + ":" + minutes + ":" + seconds 
-  //var formattedDate = hours + ":" + minutes + ":" + seconds;
-
-  return formattedDate;
-}
-
-function formatDate(timestamp) {
-  // Convert timestamp to milliseconds and create a Date object
-  var date = new Date(timestamp * 1000);
 
   // Get month, day, and year
   var month = date.getMonth() + 1; // Month starts from 0
   var day = date.getDate();
   var year = date.getFullYear();
 
+  // Extract the last two digits of the year
+  var shortYear = year.toString().slice(-2);
+
   // Add leading zeros if necessary
   month = (month < 10 ? "0" : "") + month;
   day = (day < 10 ? "0" : "") + day;
 
-  // Format the date string in mm/dd/YYYY
   var formattedDate = month + "/" + day + "/" + year;
 
   return formattedDate;
@@ -527,11 +509,11 @@ $: {
                                       <tr class="odd:bg-[#202020] border-b-[#0F0F0F] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                         
                                         <td class="text-white text-xs sm:text-sm text-start">
-                                          {formatTime(item?.updated)}
+                                          {item?.time}
                                         </td>
 
                                         <td class="text-white text-xs sm:text-sm text-start">
-                                          {formatDate(item?.updated)}
+                                          {formatDate(item?.date)}
                                         </td>
 
                                         <td class="text-white text-end">