From 2a8e839df787804186ae8f5a216b4778e4b47b3f Mon Sep 17 00:00:00 2001
From: Prakshitha Malla <prakshithamalla@gmail.com>
Date: Mon, 8 Jun 2026 22:07:03 +0530
Subject: [PATCH] perf: implement IntersectionObserver lazy loading wrapper for
 chat attachments (#347)

---
 frontend/src/components/chat/LazyMedia.jsx | 52 ++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 frontend/src/components/chat/LazyMedia.jsx

diff --git a/frontend/src/components/chat/LazyMedia.jsx b/frontend/src/components/chat/LazyMedia.jsx
new file mode 100644
index 0000000..e429558
--- /dev/null
+++ b/frontend/src/components/chat/LazyMedia.jsx
@@ -0,0 +1,52 @@
+import React, { useState, useEffect, useRef } from "react";
+
+/**
+ * LazyMedia Wrapper Component
+ * Intercepts default browser eager fetches by wrapping <img> and <audio> elements
+ * inside a native IntersectionObserver boundary listener context.
+ */
+const LazyMedia = ({ src, type = "image", alt = "Chat attachment", className = "", ...props }) => {
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    const containerRef = useRef(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsIntersecting(true);
+                    // Disconnect listener loops immediately once the target media element loads into screen views
+                    observer.disconnect();
+                }
+            },
+            {
+                rootMargin: "200px 0px", // Pre-fetch media elements 200px before they hit the viewport for seamless UX
+                threshold: 0.01
+            }
+        );
+
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <div ref={containerRef} className={`lazy-media-container ${className}`} style={{ minHeight: type === "image" ? "150px" : "40px" }}>
+            {isIntersecting ? (
+                type === "audio" ? (
+                    <audio src={src} className={className} {...props} />
+                ) : (
+                    <img src={src} alt={alt} className={className} {...props} />
+                )
+            ) : (
+                // Lightweight design placeholder element skeleton matching layout footprints
+                <div className="w-full h-full bg-base-300 animate-pulse rounded-md flex items-center justify-center text-xs text-base-content/40">
+                    {type === "audio" ? "🎵 Loading Voice Note..." : "📷 Loading Image Asset..."}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default LazyMedia;
\ No newline at end of file