fix for invalid avatarUrl error (#1986)

fix for #1985

If the avatarUrl ends up being invalid, it will use the same default
value as if the avatarUrl is missing.

I tried to fix it without useState but it caused flickering as Next.js
kept trying to fetch the invalid url

<img width="618" alt="Screenshot 2023-03-05 at 8 57 24 PM"
src="https://user-images.githubusercontent.com/43126781/223002519-51c08086-7c72-419d-812e-78c5193d3b2f.png">

website/src/components/UserAvatar.tsx

@@ -1,14 +1,20 @@
 import Image from "next/image";
-
+import { useState } from "react";
 export function UserAvatar(options: { displayName: string; avatarUrl?: string }) {
   const { displayName, avatarUrl } = options;
+  const [src, setSrc] = useState(
+    avatarUrl
+      ? avatarUrl
+      : `https://api.dicebear.com/5.x/initials/png?seed=${displayName}&radius=50&backgroundType=gradientLinear`
+  );
   return (
     <>
       <Image
-        src={
-          avatarUrl
-            ? avatarUrl
-            : `https://api.dicebear.com/5.x/initials/png?seed=${displayName}&radius=50&backgroundType=gradientLinear`
+        src={src}
+        onError={() =>
+          setSrc(
+            `https://api.dicebear.com/5.x/initials/png?seed=${displayName}&radius=50&backgroundType=gradientLinear`
+          )
         }
         alt={`${displayName}'s avatar`}
         width={30}