Optimize home page loading

package.json

@@ -10,6 +10,7 @@
     "hls.js": "^1.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.5.1",
     "react-router-dom": "^6.13.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"

src/element/video-tile.tsx

@@ -2,8 +2,10 @@ import { Link } from "react-router-dom";
 import { Profile } from "./profile";
 import "./video-tile.css";
 import { NostrEvent, encodeTLV, NostrPrefix } from "@snort/system";
+import { useInView } from "react-intersection-observer";
 
 export function VideoTile({ ev }: { ev: NostrEvent }) {
+    const { inView, ref } = useInView({ triggerOnce: true });
     const id = ev.tags.find(a => a[0] === "d")?.[1]!;
     const title = ev.tags.find(a => a[0] === "title")?.[1];
     const image = ev.tags.find(a => a[0] === "image")?.[1];
@@ -11,9 +13,9 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
     const isLive = status === "live";
 
     const link = encodeTLV(NostrPrefix.Address, id, undefined, ev.kind, ev.pubkey);
-    return <Link to={`/live/${link}`} className="video-tile">
+    return <Link to={`/live/${link}`} className="video-tile" ref={ref}>
         <div style={{
-            backgroundImage: `url(${image})`
+            backgroundImage: `url(${inView ? image : ""})`
         }}>
             <span className={`pill${isLive ? " live" : ""}`}>
                 {status}
@@ -21,7 +23,7 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
         </div>
         <h3>{title}</h3>
         <div>
-            <Profile pubkey={ev.pubkey} />
+            {inView && <Profile pubkey={ev.pubkey} />}
         </div>
     </Link>
 }

yarn.lock

@@ -7739,6 +7739,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-intersection-observer@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.5.1.tgz#63a6d7c45f7251610ad2f5a5abb85204ee0926ac"
+  integrity sha512-YwcNF/4WsMAG1rLVDQHSbpdEW9vDaIl4QW88d+vqeXNUewFV4AJDQB14oHpAJ3rRCnKRmwu3nqfwwYe6wioNIg==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"