Message chunk loading

src/components/channel/MessageBox.tsx

@@ -286,6 +286,37 @@ export default function MessageBox({
 }) {
   const [text, setText] = useState("");
 
+  const ref = useRef<HTMLDivElement | null>(null);
+  const chunkRef = useRef(0);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          console.log("Element is in view!");
+          if (!app.currentChannel) return;
+          sendRequest({
+            type: "load_chunk",
+            params: {
+              channel_id: app.currentChannel.id,
+              chunk_id: chunkRef.current,
+            },
+          });
+          chunkRef.current += 1;
+        }
+      },
+      {
+        threshold: 0.5,
+      }
+    );
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
   const sendMessage = () => {
     if (!app.currentChannel) {
       return;
@@ -346,6 +377,7 @@ export default function MessageBox({
               />
             </motion.div>
           ))}
+          <div ref={ref} />
         </AnimatePresence>
       </div>
       <footer className="flex gap-3 pr-5 w-full h-max">

src/lib/auth.ts

@@ -66,15 +66,15 @@ export default async function auth({
 
     switch (data.type) {
       case "authenticated":
-        ws.send(
-          JSON.stringify({
-            type: "load_chunk",
-            params: {
-              channel_id: "general",
-              chunk_id: 0,
-            },
-          })
-        );
+        // ws.send(
+        //   JSON.stringify({
+        //     type: "load_chunk",
+        //     params: {
+        //       channel_id: "general",
+        //       chunk_id: 0,
+        //     },
+        //   })
+        // );
         break;
 
       case "message_create":

src/types/protocol.ts

@@ -6,4 +6,5 @@ export interface MessageType<T = string, P = object> {
 export type ClientMessage =
   | MessageType<"send_message", { channel_id: string; contents: string }>
   | MessageType<"delete_message", { message_id: number }>
-  | MessageType<"edit_message", { message_id: number; new_contents: string }>;
+  | MessageType<"edit_message", { message_id: number; new_contents: string }>
+  | MessageType<"load_chunk", { channel_id: string; chunk_id: number }>;