Fixed freezing and small optimisation

src/components/MessageBox.tsx

@@ -23,35 +23,21 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { Textarea } from "./ui/textarea";
 
 function MessageContainer({ message, app }: { message: Message; app: App }) {
-  useEffect(() => {
-    axios
-      .get("/api/profile/", { params: { id: message.from } })
-      .then((res) =>
-        app.setProfiles((prev) => ({
-          ...prev,
-          [message.from]: res.data as UserProfile,
-        }))
-      )
-      .catch(() => {});
-  }, [message.from]);
+  const [profile, setProfile] = useState<UserProfile | null>();
+
+  app.getUserById(message.from).then(setProfile);
 
   return (
     <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
       <div className="flex gap-2">
         {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
         <ProfilePicture
-          url={app.profiles[message.from]?.avatar_url}
-          name={String(
-            app.profiles[message.from]
-              ? app.profiles[message.from]?.display_name
-              : message.from
-          )}
+          url={profile?.avatar_url}
+          name={profile?.display_name || message.from}
         />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
-            {app.profiles[message.from]
-              ? app.profiles[message.from]?.display_name
-              : message.from}
+            {profile?.display_name || message.from}
 
             <p className="text-neutral-500 text-xs">
               {isToday(message.timestamp * 1000)

src/components/Sidebar.tsx

@@ -8,7 +8,7 @@ import {
   Volume2Icon,
 } from "lucide-react";
 import { Server, Channel, Message } from "@/types/types";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Cookies from "js-cookie";
 import {
   Dialog,
@@ -30,10 +30,8 @@ import { UserProfile } from "@/hooks/get-user";
 import ProfilePicture from "./ProfilePicture";
 import auth from "@/lib/auth";
 import { toast } from "sonner";
-import { StringMap } from "@/types/typeUtils";
 import SettingsDialog from "./settings/SettingsDialog";
 import Link from "next/link";
-import { get, Response } from "@/lib/request";
 import { cn } from "@/lib/utils";
 import App from "@/types/app";
 import { ProfileSettings } from "@/types/settings";
@@ -58,13 +56,15 @@ export default function AppSidebar({
   const router = useRouter();
   const [filteredDms, setFilteredDms] = useState<UserProfile[]>([]);
 
-  const dms = Array.from(
+  const dms = useMemo(() => {
+    return Array.from(
       new Set(
         app.messages
           ?.flatMap((item) => [item.from, item.channel_id])
           .filter((item) => item !== app.profile?.id) || []
       )
     );
+  }, [app.messages, app.profile?.id]);
 
   useEffect(() => {
     const load = async () => {
@@ -79,11 +79,16 @@ export default function AppSidebar({
       );
     };
     load();
-  }, [dms]);
+  }, [dms, query]);
 
   useEffect(() => {
-    const s = Cookies.get("servers")?.split(",");
-    if (s) setServers(s.map((x) => x.trim().split("@") as [string, string]));
+    const stored = Cookies.get("servers");
+    if (!stored) return;
+    const parsed = stored
+      .split(",")
+      .map((x) => x.trim().split("@"))
+      .filter(([ip, name]) => ip && name) as [string, string][];
+    setServers(parsed);
   }, []);
 
   useEffect(() => {