better errors and refactoring

frontend/src/PersonDetails.tsx

@@ -8,34 +8,27 @@ import { LoadingState, EmptyState } from "./components/EmptyState";
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(!!name);
+  const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
 
   useEffect(() => {
-    if (name) {
-      setLoading(true);
-      setError(null);
-      apiFetch(`/api/${name}`)
-        .then((res) => {
-          if (!res.ok) {
-            throw new Error("Person not found");
-          }
-          return res.arrayBuffer();
-        })
-        .then((buffer) => {
-          try {
-            setPerson(Person.decode(new Uint8Array(buffer)));
-          } catch (e) {
-            console.error("Failed to decode person:", e);
-            throw new Error("Failed to load person data");
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-          setError(err.message || "Failed to load person");
-        })
-        .finally(() => setLoading(false));
-    }
+    if (!name) return;
+
+    (async () => {
+      try {
+        const res = await apiFetch(`/api/${name}`);
+        if (!res.ok) {
+          throw new Error("Person not found");
+        }
+        const buffer = await res.arrayBuffer();
+        setPerson(Person.decode(new Uint8Array(buffer)));
+      } catch (e) {
+        console.error("Failed to decode person:", e);
+        setError(e instanceof Error ? e.message : "Failed to load person data");
+      } finally {
+        setLoading(false);
+      }
+    })();
   }, [name]);
 
   if (loading) return <LoadingState message="Loading person details..." />;