fix list

src/routes/list/large-cap-stocks/+page.svelte

@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import { onMount } from 'svelte';
-
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
+  async function handleScroll() {
-  {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-  
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-  if (marketCapList?.length === rawData?.length) {
+    if (isBottom && marketCapList?.length !== rawData?.length) {
-      complete();
+        const nextIndex = marketCapList?.length;
-      } 
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      else {
+        marketCapList = [...marketCapList, ...filteredNewResults];
-      const nextIndex = marketCapList?.length;
+    }
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -168,7 +170,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
 
         </div>
     </section>

src/routes/list/mega-cap-stocks/+page.svelte

@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import { onMount } from 'svelte';
-
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
+  async function handleScroll() {
-  {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-  
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-  if (marketCapList?.length === rawData?.length) {
+    if (isBottom && marketCapList?.length !== rawData?.length) {
-      complete();
+        const nextIndex = marketCapList?.length;
-      } 
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      else {
+        marketCapList = [...marketCapList, ...filteredNewResults];
-      const nextIndex = marketCapList?.length;
+    }
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -170,9 +172,7 @@
 
           </div>
     
-        
+      
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     

src/routes/list/micro-cap-stocks/+page.svelte

@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import { onMount } from 'svelte';
-
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
+  async function handleScroll() {
-  {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-  
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-  if (marketCapList?.length === rawData?.length) {
+    if (isBottom && marketCapList?.length !== rawData?.length) {
-      complete();
+        const nextIndex = marketCapList?.length;
-      } 
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      else {
+        marketCapList = [...marketCapList, ...filteredNewResults];
-      const nextIndex = marketCapList?.length;
+    }
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -168,8 +170,6 @@
                 </tbody>
             </table>
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     

src/routes/list/mid-cap-stocks/+page.svelte

@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import { onMount } from 'svelte';
 
 
   export let data;
@@ -11,20 +11,24 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
+  async function handleScroll() {
-  {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-  
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-  if (marketCapList?.length === rawData?.length) {
+    if (isBottom && marketCapList?.length !== rawData?.length) {
-      complete();
+        const nextIndex = marketCapList?.length;
-      } 
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      else {
+        marketCapList = [...marketCapList, ...filteredNewResults];
-      const nextIndex = marketCapList?.length;
+    }
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+  
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -168,8 +172,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     

src/routes/list/nano-cap-stocks/+page.svelte

@@ -2,29 +2,31 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import { onMount } from 'svelte';
-
 
   export let data;
   
   let rawData = data?.getNanoCapStocks;
   let marketCapList = rawData?.slice(0,50);
   
-  
+  async function handleScroll() {
-  async function infiniteHandler({ detail: { loaded, complete } }) 
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
-  {
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
-  
+    if (isBottom && marketCapList?.length !== rawData?.length) {
-  if (marketCapList?.length === rawData?.length) {
+        const nextIndex = marketCapList?.length;
-      complete();
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
-      } 
+        marketCapList = [...marketCapList, ...filteredNewResults];
-      else {
+    }
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+  
+ 
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -54,6 +56,9 @@
       <a href="/list/large-cap-stocks" class="text-blue-400 hover:text-white">
           Large-Cap
       </a>,
+      <a href="/list/mid-cap-stocks" class="text-blue-400 hover:text-white">
+        Mid-Cap
+      </a>,
       <a href="/list/small-cap-stocks" class="text-blue-400 hover:text-white">
           Small-Cap
       </a>,
@@ -166,8 +171,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     

src/routes/list/nano-cap-stocks/+page.ts

@@ -1,24 +1,7 @@
-import { userRegion, getCache, setCache } from '$lib/store';
+import {  getCache, setCache } from '$lib/store';
 
 
-const usRegion = ['cle1','iad1','pdx1','sfo1'];
+export const load = async ({parent}) => {
-
-let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-
-userRegion.subscribe(value => {
-
-  if (usRegion.includes(value)) {
-    apiURL = import.meta.env.VITE_USEAST_API_URL;
-  } else {
-    apiURL = import.meta.env.VITE_EU_API_URL;
-  }
-});
-
-
-
-export const load = async () => {
   const getNanoCapStocks = async () => {
     let output;
 
@@ -27,7 +10,7 @@ export const load = async () => {
     if (cachedData) {
       output = cachedData;
     } else {
-      
+      const { apiURL, apiKey} = await parent();
       const postData = {'filterList': 'nanoCap'}
 
       const response = await fetch(apiURL + '/filter-stock-list', {