From c0bedc33d0615591c2c7d3469ff5c12959ce0a73 Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sat, 23 Mar 2024 22:06:41 +0800
Subject: [PATCH 1/2] feat(component): add common use LazyImage component

---
 src/components/common/LazyImage.tsx | 38 +++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/common/LazyImage.tsx

diff --git a/src/components/common/LazyImage.tsx b/src/components/common/LazyImage.tsx
new file mode 100644
index 0000000..a053dbc
--- /dev/null
+++ b/src/components/common/LazyImage.tsx
@@ -0,0 +1,38 @@
+import type { ComponentProps, ReactElement } from 'react'
+import { useInView } from 'react-intersection-observer'
+import cn from 'utils/cn'
+
+type Props = ComponentProps<'img'> & {
+	rootSelector?: string
+	rootMargin?: string
+}
+
+export default function LazyImage({
+	src,
+	alt,
+	rootSelector = undefined,
+	rootMargin = '250px 0px',
+	className,
+	...props
+}: Props): ReactElement {
+	const { ref, inView } = useInView({
+		root: rootSelector ? document.querySelector(rootSelector) : undefined,
+		triggerOnce: true,
+		rootMargin
+	})
+
+	return (
+		<div ref={ref} className={cn('relative', className)}>
+			<div className='absolute inset-0 -z-10 w-full bg-[#363636]' />
+			{!!inView && (
+				<img
+					className='h-full w-full'
+					src={src}
+					alt={alt}
+					// eslint-disable-next-line react/jsx-props-no-spreading
+					{...props}
+				/>
+			)}
+		</div>
+	)
+}

From da57f53f207050c7f1fc2d8618f3d5f9934da6a6 Mon Sep 17 00:00:00 2001
From: yun-cheng <yuncheng.dev@gmail.com>
Date: Sat, 23 Mar 2024 22:08:57 +0800
Subject: [PATCH 2/2] feat(ResultsPage): implement lazy loading for result
 images

---
 src/components/result/ResultItem.tsx | 8 +++++++-
 src/pages/ResultsPage.tsx            | 8 ++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/result/ResultItem.tsx b/src/components/result/ResultItem.tsx
index 31bb167..12c2875 100644
--- a/src/components/result/ResultItem.tsx
+++ b/src/components/result/ResultItem.tsx
@@ -1,3 +1,4 @@
+import LazyImage from 'components/common/LazyImage'
 import type { ReactElement } from 'react'
 import type { Result } from 'types/result'
 import cn from 'utils/cn'
@@ -11,7 +12,12 @@ export default function ResultItem({
 }: Props): ReactElement {
 	return (
 		<div>
-			<img className='aspect-[1.5] w-full' src={avater} alt='avatar' />
+			<LazyImage
+				className='aspect-[1.5] w-full'
+				rootSelector='#resultsContainer'
+				src={avater}
+				alt='avatar'
+			/>
 			<div
 				className={cn(
 					'mt-[20.33px] sm:mt-3',
diff --git a/src/pages/ResultsPage.tsx b/src/pages/ResultsPage.tsx
index af1d1ab..5bd1de3 100644
--- a/src/pages/ResultsPage.tsx
+++ b/src/pages/ResultsPage.tsx
@@ -12,7 +12,7 @@ export default function ResultsPage(): ReactElement {
 
 	const { ref, inView } = useInView({
 		root: containerRef.current,
-		rootMargin: '0px 0px 250px'
+		rootMargin: '250px 0px'
 	})
 
 	const { data, isFetching, fetchNextPage } = useFetchResults()
@@ -25,7 +25,11 @@ export default function ResultsPage(): ReactElement {
 
 	return (
 		<div className={cn('h-screen px-[7px] sm:px-[14px]', 'flex flex-col')}>
-			<div ref={containerRef} className='mt-[70px] overflow-y-auto sm:mt-0'>
+			<div
+				id='resultsContainer'
+				ref={containerRef}
+				className='mt-[70px] overflow-y-auto sm:mt-0'
+			>
 				<div className='mx-auto max-w-[814px]'>
 					<div
 						className={cn(