reduce bundle size by removing svelte-motion

package-lock.json

@@ -49,7 +49,6 @@
         "svelte-inview": "^4.0.2",
         "svelte-lightweight-charts": "^2.2.0",
         "svelte-loading-spinners": "^0.3.6",
-        "svelte-motion": "^0.12.2",
         "svelte-progress-bar": "^3.0.2",
         "svelte-range-slider-pips": "^2.3.1",
         "svelte-sonner": "^0.3.27",
@@ -3156,26 +3155,12 @@
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.12",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
-    },
     "node_modules/@types/pug": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
       "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
       "dev": true
     },
-    "node_modules/@types/react": {
-      "version": "18.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
-      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -4180,11 +4165,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
     "node_modules/culori": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
@@ -4911,19 +4891,6 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/framesync": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
-      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
-      "dependencies": {
-        "tslib": "2.4.0"
-      }
-    },
-    "node_modules/framesync/node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -5201,11 +5168,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
-    },
     "node_modules/html2canvas": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
@@ -6514,22 +6476,6 @@
       "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.21.3.tgz",
       "integrity": "sha512-bsQRZ1mj4dhPJ4P5iSrDqWQtBX2NtuBkf6IOZwTv27zZOw6zrISgo963i5JD/99qKKD5aMSMDPGk1BE9ZyI7Cg=="
     },
-    "node_modules/popmotion": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
-      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
-      "dependencies": {
-        "framesync": "6.1.2",
-        "hey-listen": "^1.0.8",
-        "style-value-types": "5.1.2",
-        "tslib": "2.4.0"
-      }
-    },
-    "node_modules/popmotion/node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -7356,20 +7302,6 @@
       "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
     },
-    "node_modules/style-value-types": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
-      "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
-      "dependencies": {
-        "hey-listen": "^1.0.8",
-        "tslib": "2.4.0"
-      }
-    },
-    "node_modules/style-value-types/node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -7579,21 +7511,6 @@
       "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.6.tgz",
       "integrity": "sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ=="
     },
-    "node_modules/svelte-motion": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/svelte-motion/-/svelte-motion-0.12.2.tgz",
-      "integrity": "sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw==",
-      "dependencies": {
-        "@types/react": "^18.2.42",
-        "framesync": "^6.1.2",
-        "popmotion": "^11.0.5",
-        "style-value-types": "5.1.2",
-        "tslib": "^2.6.2"
-      },
-      "peerDependencies": {
-        "svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
-      }
-    },
     "node_modules/svelte-preprocess": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",

package.json

@@ -91,7 +91,6 @@
     "svelte-inview": "^4.0.2",
     "svelte-lightweight-charts": "^2.2.0",
     "svelte-loading-spinners": "^0.3.6",
-    "svelte-motion": "^0.12.2",
     "svelte-progress-bar": "^3.0.2",
     "svelte-range-slider-pips": "^2.3.1",
     "svelte-sonner": "^0.3.27",

src/lib/components/BullBearSay.svelte

@@ -1,7 +1,6 @@
 <script lang='ts'>
 import { stockTicker, displayCompanyName } from "$lib/store";
 import InfoModal from '$lib/components/InfoModal.svelte';
-import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 export let data;
 export let marketMoods = {};
@@ -78,7 +77,6 @@ $: {
     {#if data?.user?.tier === 'Pro'}
    <!--Start Header-->
    <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 -mt-2">
-    <AnimateSharedLayout>
       {#each tabs as item, i}
         <button
           on:click={() => handleMode(i)}
@@ -87,16 +85,9 @@ $: {
             : ''} "
         >
           {#if activeIdx === i}
-            <Motion
-              layoutId="clicked-btn"
-              transition={{ duration: 0.2 }}
-              let:motion
-            >
               <div
-                use:motion
                 class="absolute inset-0 rounded-lg bg-purple-600"
               ></div>
-            </Motion>
           {/if}
           <span
             class="relative text-sm block font-medium duration-200 text-white">
@@ -104,7 +95,6 @@ $: {
           </span>
         </button>
       {/each}
-    </AnimateSharedLayout>
   </div>
   
 

src/lib/components/SECFilingsCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
-import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 import { fade } from 'svelte/transition';
   
@@ -175,7 +174,6 @@ $: {
         <div class="relative right-0 bg-[#27272A] rounded-lg">
 
           <div class="relative flex flex-row items-center p-1 list-none rounded-lg">
-            <AnimateSharedLayout>
               {#each tabs as item, i}
                 <button
                   on:click={() => changeSECType(i)}
@@ -184,16 +182,9 @@ $: {
                     : ''} "
                   >
                   {#if activeIdx === i}
-                    <Motion
-                      layoutId="clicked-btn"
-                      transition={{ duration: 0.2 }}
-                      let:motion
-                    >
                       <div
-                        use:motion
                         class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1,2]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
                       ></div>
-                    </Motion>
                   {/if}
                   
                   {#if item?.title === '8-K'}
@@ -215,7 +206,6 @@ $: {
 
                 </button>
               {/each}
-            </AnimateSharedLayout>
           </div>
 
         </div>

src/lib/components/Swap.svelte

@@ -4,7 +4,6 @@
     import { swapComponent, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { Motion, AnimateSharedLayout } from "svelte-motion";
 
     import { init, use } from 'echarts/core'
     import { ScatterChart } from 'echarts/charts'
@@ -248,33 +247,23 @@
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
             <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-4">
-                <AnimateSharedLayout>
                   {#each tabs as item, i}
                     <button
                       on:click={() => changeTab(i)}
                       class="group relative z-[1] rounded-full px-3 py-1 {activeIdx === i
                         ? 'z-0'
-                        : ''} "
+                        : ''} ">
-                    >
                       {#if activeIdx === i}
-                        <Motion
-                          layoutId="clicked-btn"
-                          transition={{ duration: 0.2 }}
-                          let:motion
-                        >
                           <div
-                            use:motion
                             class="absolute inset-0 rounded-lg bg-purple-600"
                           ></div>
-                        </Motion>
                       {/if}
                       <span
-                        class="relative text-xs sm:text-sm block font-medium duration-200 text-white">
+                        class="relative text-sm block font-medium duration-200 text-white">
                         {item.title}
                       </span>
                     </button>
                   {/each}
-                </AnimateSharedLayout>
               </div>
 
           

src/routes/+layout.svelte

@@ -270,7 +270,7 @@ $: {
 
 <div class="flex min-h-screen w-full flex-col bg-[#09090B]">
 
-  <Splitpanes class="w-full" theme="no-splitter" horizontal dblClickSplitter={false}>
+  <Splitpanes class="w-full " style="z-index: 1" theme="no-splitter" horizontal dblClickSplitter={false}>
     <Pane size={6} minSize={10} maxSize={6} class="w-full navbar sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
         
           <Sheet.Root>

src/routes/hedge-funds/[slug]/+page.svelte

@@ -3,7 +3,6 @@
   import { screenWidth, numberOfUnreadNotification, displayCompanyName } from '$lib/store';
   import cardBackground from "$lib/images/bg-hedge-funds.png";
   import defaultAvatar from "$lib/images/hedge_funds/default-avatar.png";
-  import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 
   import { abbreviateNumber, formatString } from '$lib/utils';
@@ -675,7 +674,6 @@ onMount(async () => {
                         <div class="relative right-0 bg-[#141417] rounded-lg">
                 
                           <div class="relative flex flex-row items-center p-1 list-none rounded-lg">
-                        <AnimateSharedLayout>
                           {#each tabs as item, i}
                             <button
                               on:click={() => changeTab(i)}
@@ -684,16 +682,9 @@ onMount(async () => {
                                 : ''} "
                               >
                               {#if activeIdx === i}
-                                <Motion
-                                  layoutId="clicked-btn"
-                                  transition={{ duration: 0.2 }}
-                                  let:motion
-                                >
                                   <div
-                                    use:motion
                                     class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
                                   ></div>
-                                </Motion>
                               {/if}
                               
                               {#if item?.title === 'Stocks'}
@@ -710,7 +701,6 @@ onMount(async () => {
             
                             </button>
                           {/each}
-                        </AnimateSharedLayout>
                       </div>
                       </div>
                       </div>

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

@@ -1149,13 +1149,6 @@ function changeChartType() {
                                     <div class="{displayData === 'MAX' ? `bg-[${colorChange}]` : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem]" />
                                   </div>
 
-                                  <label on:click={changeChartType} class="ml-auto mr-5 -mt-1 sm:hidden border border-slate-800 px-2.5 py-1 rounded-xl">
-                                    {#if displayChartType === 'line'}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
-                                      {:else}
-                                      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5L9 10l4 6l8-9.5"/></svg>
-                                      {/if}
-                                  </label>
                                     
                                     </div>
                                     <!--End Time Interval-->

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

@@ -5,7 +5,6 @@ import InfoModal from '$lib/components/InfoModal.svelte';
 import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 import { goto } from '$app/navigation';
 import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
-import { Motion, AnimateSharedLayout } from "svelte-motion";
 
 export let data;
 
@@ -239,7 +238,6 @@ changeTab(0)
 
                           <div class="ml-auto">
                           <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 mt-4">
-                            <AnimateSharedLayout>
                               {#each tabs as item, i}
                                 <button
                                   on:click={() => changeTab(i)}
@@ -248,16 +246,9 @@ changeTab(0)
                                     : ''} "
                                 >
                                   {#if activeIdx === i}
-                                    <Motion
-                                      layoutId="clicked-btn"
-                                      transition={{ duration: 0.2 }}
-                                      let:motion
-                                    >
                                       <div
-                                        use:motion
                                         class="absolute inset-0 rounded-lg bg-purple-600"
                                       ></div>
-                                    </Motion>
                                   {/if}
                                   <span
                                     class="relative text-sm block font-medium duration-200 text-white">
@@ -265,7 +256,6 @@ changeTab(0)
                                   </span>
                                 </button>
                               {/each}
-                            </AnimateSharedLayout>
                           </div>
                         </div>
                         </div>