From ec2b8570ebd65c5468baec7cafc6e90cdc1af62d Mon Sep 17 00:00:00 2001
From: jasinco <jasinc90@gmail.com>
Date: Wed, 11 Jun 2025 01:19:28 +0800
Subject: [PATCH] change onscrollend to obeserver implemention

---
 src/Fetch.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/Fetch.tsx b/src/Fetch.tsx
index 4ef89e7..99387b5 100644
--- a/src/Fetch.tsx
+++ b/src/Fetch.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import { FetchPost, MediaPathTrc, SinglePost_t } from "./api"
 import { z } from 'zod/v4'
 import { useInfiniteQuery } from "@tanstack/react-query"
@@ -50,9 +50,17 @@ export const Fetch = () => {
 			return lastPage !== null && lastPage.length > 0 && (lastPage[lastPage.length - 1].id - 1) > 0 ? lastPage[lastPage.length - 1].id - 1 : undefined
 		},
 	})
+	const observer = new IntersectionObserver((ent) => {
 
+		if (ent[0].isIntersecting && ent[0].intersectionRatio > 90) {
+			hasNextPage && !isFetching && fetchNextPage()
+		}
+	})
+	useEffect(() => {
+		observer.observe(document.getElementById("skeleton")!)
+	}, [])
 	return (
-		<div className="h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4 overflow-scroll" onScrollEnd={() => hasNextPage && !isFetching && fetchNextPage()}>
+		<div className="h-dvh w-dvw flex flex-col items-center gap-6 py-8 px-4 overflow-scroll">
 			{status === 'pending' && <p>Loading</p>}
 			{status === 'error' && <p>Error: {error.message}</p>}
 			{data && data.pages.map((group, i) => (
@@ -62,8 +70,8 @@ export const Fetch = () => {
 					))}
 				</React.Fragment>
 			))}
-			{hasNextPage && <div className="w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 animate-pulse h-[20dvh]" >
-			</div>}
+			<div className={"w-full max-w-2xl bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 animate-pulse h-[20dvh]" + (hasNextPage ? "" : " hidden")} id="skeleton">
+			</div>
 			{!hasNextPage && <p className="mb-15">見底了</p>}
 		</div>
 	)