From e7939b0a34ac8a5562daab6f8b4803f5c31eac06 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 20 Sep 2024 21:42:37 +0200
Subject: [PATCH] update

---
 src/routes/etf/+page.svelte                   | 10 ++--
 src/routes/etf/etf-providers/+page.svelte     |  8 +--
 .../etf/etf-providers/[slug]/+page.svelte     | 51 +++++++++----------
 3 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/routes/etf/+page.svelte b/src/routes/etf/+page.svelte
index 0ab1bc55..d574907d 100644
--- a/src/routes/etf/+page.svelte
+++ b/src/routes/etf/+page.svelte
@@ -161,11 +161,13 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
                 </thead>
                 <tbody>
                   {#each stockList as item,index}
-                  <tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
+                  <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
                     
-                    <td class="text-blue-400 font-medium text-sm sm:text-[1rem] text-start border-b-[#09090B]">
-                      {item?.symbol}
-                    </td>
+                    <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                              <a href={"/etf/"+item?.symbol} class="sm:hover:text-white text-blue-400">
+                                {item?.symbol}
+                              </a>
+                            </td>
       
                     <td class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]">
                      {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
diff --git a/src/routes/etf/etf-providers/+page.svelte b/src/routes/etf/etf-providers/+page.svelte
index b308f636..43576851 100644
--- a/src/routes/etf/etf-providers/+page.svelte
+++ b/src/routes/etf/etf-providers/+page.svelte
@@ -69,11 +69,13 @@ let etfProviderList = data?.getAllETFProviders;
                     <tbody>
                       {#each etfProviderList as item,index}
                       <!-- row -->
-                      <tr on:click={() => goto("/etf/etf-providers/"+item?.etfProvider)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
+                      <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
                         
 
-                        <td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
-                            {formatETFName(item?.etfProvider)}
+                        <td class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]">
+                            <a href={"/etf/etf-providers/"+item?.etfProvider} class="sm:hover:text-white text-blue-400">
+                              {formatETFName(item?.etfProvider)}
+                            </a>
                         </td>
     
                         <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end sm:text-center">
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index 33c31ddb..09e1deb1 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { abbreviateNumber, formatETFName} from '$lib/utils';
     import { screenWidth, numberOfUnreadNotification } from '$lib/store';
-    import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+    import { onMount } from 'svelte';
 
     export let data;
     let rawData = data?.getETFProviderData;
@@ -18,31 +18,25 @@
     ) / rawData?.length;
     
 
-    async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (etfProviderData?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = etfProviderData?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      etfProviderData = [...etfProviderData, ...newElements];
-      loaded();
-      }
+   async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && etfProviderData?.length !== rawData?.length) {
+        const nextIndex = etfProviderData?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
+        etfProviderData = [...etfProviderData, ...filteredNewResults];
+    }
   }
 
-    let charNumber = 20;
-    
-    $: {
-      if ($screenWidth < 640)
-      {
-        charNumber = 30;
-      }
-      else {
-        charNumber = 50;
-      }
-    }
+onMount(() => {
+   window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+})
+
+
+   $:charNumber = $screenWidth < 640 ? 20 : 30;
 
 
 </script>
@@ -124,10 +118,12 @@
                         <tbody>
                           {#each etfProviderData as item,index}
                           <!-- row -->
-                          <tr on:click={() => goto("/etf/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
+                          <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
                             
-                            <td class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                              {item?.symbol}
+                            <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                              <a href={"/etf/"+item?.symbol} class="sm:hover:text-white text-blue-400">
+                                {item?.symbol}
+                              </a>
                             </td>
     
                             <td class="text-gray-200 border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
@@ -158,7 +154,6 @@
                       </table>
         
 
-                <InfiniteLoading on:infinite={infiniteHandler} />
               </div>
 
             </div>