DMのロード時にエラーが表示されないようにした

Author: RRRyoma

web/app/chat/[id]/page.tsx

@@ -4,23 +4,33 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import * as chat from "~/api/chat/chat";
 import { RoomWindow } from "~/components/chat/RoomWindow";
+import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 
 export default function Page({ params }: { params: { id: string } }) {
   const id = Number.parseInt(params.id);
   const [room, setRoom] = useState<(DMRoom & PersonalizedDMRoom) | null>(null);
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     (async () => {
-      const room = await chat.getDM(id);
-      setRoom(room);
+      try {
+        const room = await chat.getDM(id);
+        setRoom(room);
+      } finally {
+        setLoading(false);
+      }
     })();
   }, [id]);
 
+  if (loading) {
+    return <FullScreenCircularProgress />;
+  }
+
   return (
     <>
       {room ? (
         <RoomWindow friendId={id} room={room} />
       ) : (
-        // FIXME: this isn't an error when it's just loading
         <p>
           Sorry, an unexpected error has occurred.
           <Link href="/home" className="text-blue-600">