decrease loading time of watchlist

src/routes/sitemap.xml/+server.ts

@@ -67,7 +67,8 @@ const pages = [
   { title: "/hedge-funds" },
   { title: "/login" },
   { title: "/register" },
-  { title: "/watchlist" },
+  { title: "/watchlist/stocks" },
+  { title: "/watchlist/options" },
   //{ title: "/leaderboard" },
   //{ title: "/tournament-rules" },
   { title: "/pricing" },

src/routes/watchlist/+layout.svelte

@@ -110,7 +110,7 @@ let activeIdx = 0;
 
                 <div class="bg-[#313131] w-52 sm:w-fit relative m-auto sm:m-0 sm:mr-auto flex sm:flex-wrap items-center justify-center rounded-lg p-1 -mt-3">
                     {#each tabs as item, i}
-                    <button
+                    <a  href={i === 0 ? '/watchlist/stocks' : '/watchlist/options'}
                         on:click={() => handleMode(i)}
                         class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
                         ? 'z-0'
@@ -124,7 +124,7 @@ let activeIdx = 0;
                         <span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
                             {item.title}
                         </span>
-                    </button>
+                    </a>
                     {/each}
                     </div>
 

src/routes/watchlist/options/+page.svelte

@@ -237,9 +237,13 @@ onMount(async () => {
 
                 <td on:click={() => handleFilter(item?.id)} class="flex flex-row items-center text-sm sm:text-[1rem] text-start">
                     <input type="checkbox" checked={deleteOptionsId?.includes(item?.id) ?? false} class="{!editMode ? 'hidden' : ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3" />
-                    <a class="inline-block  sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" href={(!editMode && item?.underlying_type === 'stock') ? `/stocks/${item?.ticker}` : `/etf/${item?.ticker}`} on:click|stopPropagation>
+                    {#if !editMode}
+                    <a class="inline-block  sm:hover:text-white text-blue-400 text-sm sm:text-[1rem]" href={(item?.underlying_type === 'stock') ? `/stocks/${item?.ticker}` : `/etf/${item?.ticker}`} on:click|stopPropagation>
                         {item?.ticker}
                     </a>
+                    {:else}
+                    <span class="text-blue-400 cursor-pointer">{item?.ticker}</span>
+                    {/if}
                 </td>
                 <td class="text-white text-sm sm:text-[1rem] text-start">
                   {formatDate(item?.date)}
@@ -316,6 +320,17 @@ onMount(async () => {
         
             </div>
             <!--End Table-->
+          <div class="flex flex-col justify-center items-center m-auto pt-8">
+            <span class="text-white text-[1rem] sm:text-lg font-medium m-auto p-4 text-center">
+                Add your unusual options contracts and start tracking them now!
+            </span>
+            <a href="/options-flow" class="py-3 rounded-lg w-64 flex mt-5 justify-center items-center m-auto text-white bg-purple-600 sm:hover:bg-purple-700 transition duration-150 ease-in-out group">
+                <span class="font-semibold text-[1rem]">Follow the Whales 
+                    <svg class="inline-block -mt-2 -ml-1 w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="none"><path fill="#00a6ed" d="M24.04 6.508C27.007 9.5 29 12.953 29 16.468c0 6.422-1.95 10.392-6.648 12.315a16 16 0 0 1-1.652-.318l-.012.582c-.105.563-.485 1.352-1.625.703c-.84-.478-2.112-1.55-2.33-4.281c-.511-1.271-.617-2.91-.733-4.969c-.164-2.91-3.078-3.89-5-4c-1.84-.105-8.316-.467-8.869-.498a15 15 0 0 1-.01-1.111c0-2.66 3.363-4.9 5.713-4.9h6.55c3.46 0 6.27 2.81 6.27 6.27c-.17 2.411 3.373 3.405 3.82.78c.492-2.896-.591-6.166-2.435-8.494c-.195-.047-.308-.047-.445.047c-1.258 1.258-2.16 1.312-3.852.914a1 1 0 0 0-.239-.103c-.228-.077-.435-.147-.331-.608c.14-.625 1.125-1.719 1.125-1.719c.773-.906 1.758-1.11 2.226-1.055c.402.047.515-.068.58-.135l.03-.029c.065-.051.133-.437.133-.437c-.164-.875.043-1.678.547-2.383c0 0 .882-1.266 1.687-1.344c.72-.07.803.37.879.768q.012.071.027.139c.334 1.535.17 1.902-.215 2.765c-.065.147-.137.308-.214.492c-.13.308-.058.434.038.605zM8.219 29.938c-1.735 0-3.64-2.438-3.11-5.922c.313.2 2.615 2.052 3.75 3.14c.329.844.11 2.782-.64 2.782"/><path fill="#1c1c1c" d="M15.517 15a.61.61 0 0 1-.604-.604v-.758c0-.33.274-.604.604-.604s.604.274.604.604v.758a.604.604 0 0 1-.604.604"/><path fill="#aeddff" d="M20.706 28.208q.745.278 1.692.556q-.84.348-1.8.608q.06-.166.09-.325zm-3.973-4.468c-.107-.771-.157-1.671-.217-2.74l-.016-.281c-.164-2.911-3.766-4.61-5.687-4.719c-1.839-.105-8.138-.01-8.682 0c.339 7.399 6.034 14.639 13.885 14.095a27 27 0 0 0 3.007-.367c-1-.583-2.564-2.007-2.29-5.988"/></g></svg>
+                </span>
+            </a>
+        </div>
+
     {:else}
    <div class="flex flex-col justify-center items-center m-auto pt-8">
             <span class="text-white font-bold text-white text-2xl sm:text-3xl">