feat(island): ✨ allow lazy load blog card list with intersection observer

islands/BlogCardList.tsx

@@ -2,8 +2,8 @@ import { BlogCard, BlogProps } from ':components/BlogBlocks.tsx'
 import Suspense from ':islands/Suspens.tsx'
 import { requestApiStream } from ':src/utils.ts'
 import { Signal, useSignal } from '@preact/signals'
-import type { JSX } from 'preact'
-import { useEffect } from 'preact/hooks'
+import type { JSX, Ref } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
 
 function fillList(
     list: Signal<JSX.Element[]>,
@@ -27,13 +27,31 @@ function fillList(
 }
 
 export default function BlogCardList(
-    { limit, usePlaceholder }: { usePlaceholder?: boolean; limit?: number },
+    { limit, usePlaceholder, useObserver }: {
+        usePlaceholder?: boolean
+        limit?: number
+        useObserver?: boolean
+    },
 ) {
-    const list = useSignal<JSX.Element[]>([])
+    const list: Signal<JSX.Element[]> = useSignal<JSX.Element[]>([])
     const ac = new AbortController()
+    const ref = useRef(null)
 
     useEffect(() => {
+        if (ref.current && useObserver) {
+            const observer = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting) {
                     fillList(list, { limit, ac })
+                    observer.disconnect()
+                }
+            }, {
+                rootMargin: '300px',
+            })
+            //@ts-expect-error Need to investigate why it's work
+            observer.observe(ref.current.base)
+        } else {
+            fillList(list, { limit, ac })
+        }
     })
 
     if (limit && usePlaceholder) {
@@ -41,7 +59,7 @@ export default function BlogCardList(
             .from({ length: limit })
             .map((_, index) => (
                 <Suspense
-                    loader={<Placeholder />}
+                    loader={<Placeholder ref={index === 0 ? ref : undefined} />}
                     fallback={Fallback}
                     signal={ac.signal}
                 >
@@ -54,9 +72,12 @@ export default function BlogCardList(
     return <>{list}</>
 }
 
-function Placeholder() {
+function Placeholder({ ref }: { ref?: Ref<HTMLDivElement> | undefined }) {
     return (
-        <div class='components__blog_block components__blog_block--card components__blog_block--placeholder'>
+        <div
+            class='components__blog_block components__blog_block--card components__blog_block--placeholder'
+            ref={ref}
+        >
             <h3>Chargement ...</h3>
         </div>
     )