feat: preload images when near view

Fixes #8

deno.json

@@ -32,7 +32,6 @@
     "react": "npm:[email protected]",
     "react-dom": "npm:[email protected]",
     "react-icons": "npm:[email protected]",
-    "react-intersection-observer": "npm:[email protected]",
     "react-router-dom": "npm:[email protected]",
     "tailwindcss": "npm:[email protected]",
     "vite": "npm:[email protected]",

src/pages/Browse/ExtensionBrowse.tsx

@@ -1,13 +1,13 @@
 import { forwardRef, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { useInView } from "react-intersection-observer";
 
 import { Extension } from "../../types/extension.ts";
 import { Manga } from "../../types/manga.ts";
 import { getMangaList } from "../../services/extensions.service.ts";
 import { useStore } from "../../services/store.service.ts";
 import { downloadImage } from "../../services/tauri.service.ts";
 import useInfiniteScroll from "../../utils/infinite-scroll-hook.ts";
+import useLazyImage from "../../utils/lazy-image-hook.ts";
 
 export default function ExtensionBrowse() {
   const { extensionId } = useParams();
@@ -116,10 +116,11 @@ const MangaItem = (
   const [src, setSrc] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
-  const { ref, inView } = useInView({
+  const { containerRef, inView } = useLazyImage({
     onChange: (inView) => {
       if (inView) setLoading(true);
     },
+    offset: "200vh",
   });
 
   useEffect(() => {
@@ -133,11 +134,13 @@ const MangaItem = (
   return (
     <>
       <Link
-        ref={ref}
         to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
         state={manga}
       >
-        <div className="w-full aspect-[2/3] skeleton rounded-md">
+        <div
+          ref={containerRef}
+          className="w-full aspect-[2/3] skeleton rounded-md relative"
+        >
           {inView && (
             <img
               src={src}

src/utils/lazy-image-hook.ts

@@ -0,0 +1,53 @@
+import { LegacyRef, useEffect, useRef, useState } from "react";
+
+export default function useLazyImage({
+  onChange = (_inView: boolean) => {},
+  offset = "0px",
+}: {
+  onChange?: (inView: boolean) => void;
+  offset?: string;
+}) {
+  const [inView, setInView] = useState(false);
+  const observerRef = useRef<IntersectionObserver>();
+  const targetRef = useRef((() => {
+    const target = document.createElement("div");
+    target.setAttribute("image-lazy-loading-detector", "");
+    target.style.position = "absolute";
+    target.style.bottom = "0px";
+    target.style.width = "0px";
+    target.style.height = `calc(100% + ${offset} * 2)`;
+    target.style.top = `calc(${offset} * -1)`;
+    return target;
+  })());
+
+  const containerRef: LegacyRef<HTMLElement> = (container: HTMLElement) => {
+    if (container) {
+      container.append(targetRef.current);
+      container.style.position = "relative";
+    }
+  };
+
+  useEffect(() => {
+    onChange(inView);
+  }, [inView]);
+
+  useEffect(() => {
+    const observer = observerRef.current;
+
+    if (observer) {
+      observer.disconnect();
+    }
+
+    observerRef.current = new IntersectionObserver(([entry]) => {
+      setInView(entry.isIntersecting);
+    });
+
+    observerRef.current.observe(targetRef.current);
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+
+  return { containerRef, inView };
+}