MAJOR Fix: Resolved API Request Delays;

Feat: Added a dev test account to users for expedited login;
Refactor: Improve socket connection handling and add logging for API request duration & update to ListRow key generation for improved uniqueness;
Feat: Made it so streams with no set thumbnail use their category's thumbnail;
Minor Fix: Corrections to db recommendation methods;

frontend/src/components/Layout/ListRow.tsx

@@ -68,7 +68,7 @@ const ListRow: React.FC<ListRowProps> = ({
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {items.map((item) => (
           <ListItem
-            key={item.id}
+            key={`${item.type}-${item.id}`}
             id={item.id}
             type={item.type}
             title={item.title}

frontend/src/components/Video/ChatPanel.tsx

@@ -23,8 +23,17 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
   // Join chat room when component mounts
   useEffect(() => {
     if (socket && isConnected) {
+      // Join chat room
       socket.emit("join", { stream_id: streamId });
 
+      // Handle beforeunload event
+      const handleBeforeUnload = () => {
+        socket.emit("leave", { stream_id: streamId });
+        socket.disconnect();
+      };
+
+      window.addEventListener("beforeunload", handleBeforeUnload);
+
       // Load initial chat history
       fetch(`/api/chat/${streamId}`)
         .then((response) => {
@@ -45,9 +54,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
         setMessages((prev) => [...prev, data]);
       });
 
-      // Cleanup
+      // Cleanup function
       return () => {
+        window.removeEventListener("beforeunload", handleBeforeUnload);
         socket.emit("leave", { stream_id: streamId });
+        socket.disconnect();
         socket.off("new_message");
       };
     }