render grey Icon if no pubkey or avatarPath on Avatar

ts/components/Avatar.tsx

@@ -7,7 +7,7 @@ import { ConversationAttributes } from '../../js/models/conversations';
 interface Props {
   avatarPath?: string;
   name?: string; // display name, profileName or phoneNumber, whatever is set first
-  pubkey: string;
+  pubkey?: string;
   size: number;
   closedMemberConversations?: Array<ConversationAttributes>;
   onAvatarClick?: () => void;

ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx

@@ -4,7 +4,7 @@ import { getInitials } from '../../util/getInitials';
 interface Props {
   diameter: number;
   name: string;
-  pubkey: string;
+  pubkey?: string;
   colors: Array<string>;
   borderColor: string;
 }
@@ -23,29 +23,52 @@ export class AvatarPlaceHolder extends React.PureComponent<Props, State> {
   }
 
   public componentDidMount() {
-    void this.sha512(this.props.pubkey).then((sha512Seed: string) => {
-      this.setState({ sha512Seed });
-    });
+    const { pubkey } = this.props;
+    if (pubkey) {
+      void this.sha512(pubkey).then((sha512Seed: string) => {
+        this.setState({ sha512Seed });
+      });
+    }
   }
 
   public componentDidUpdate(prevProps: Props, prevState: State) {
-    if (this.props.name === prevProps.name) {
+    const { pubkey, name } = this.props;
+    if (pubkey === prevProps.pubkey && name === prevProps.name) {
       return;
     }
-    void this.sha512(this.props.name).then((sha512Seed: string) => {
-      this.setState({ sha512Seed });
-    });
+
+    if (pubkey) {
+      void this.sha512(pubkey).then((sha512Seed: string) => {
+        this.setState({ sha512Seed });
+      });
+    }
   }
 
   public render() {
+    const { borderColor, colors, diameter, name } = this.props;
+    const viewBox = `0 0 ${diameter} ${diameter}`;
+    const r = diameter / 2;
+
     if (!this.state.sha512Seed) {
-      return <></>;
+      // return grey circle
+      return (
+        <svg viewBox={viewBox}>
+          <g id="UrTavla">
+            <circle
+              cx={r}
+              cy={r}
+              r={r}
+              fill="#d2d2d3"
+              shape-rendering="geometricPrecision"
+              stroke={borderColor}
+              stroke-width="1"
+            />
+          </g>
+        </svg>
+      );
     }
 
-    const { borderColor, colors, diameter, name } = this.props;
-    const r = diameter / 2;
     const initial = getInitials(name)?.toLocaleUpperCase() || '0';
-    const viewBox = `0 0 ${diameter} ${diameter}`;
     const fontSize = diameter * 0.5;
 
     // Generate the seed simulate the .hashCode as Java

ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx

@@ -10,74 +10,51 @@ interface Props {
 }
 
 export class ClosedGroupAvatar extends React.PureComponent<Props> {
+  public getClosedGroupAvatarsSize(size: number) {
+    // Always use the size directly under the one requested
+    switch (size) {
+      case 36:
+        return 28;
+      case 48:
+        return 36;
+      case 64:
+        return 48;
+      case 80:
+        return 64;
+      case 300:
+        return 80;
+      default:
+        throw new Error(
+          `Invalid size request for closed group avatar: ${size}`
+        );
+    }
+  }
+
   public render() {
     const { conversations, size } = this.props;
-    // FIXME audric render grey circle for missing avatar
-    if (conversations.length < 2) {
-      const conv = conversations[0];
-      const name = conv.name || conv.id;
-      return (
+    const avatarsDiameter = this.getClosedGroupAvatarsSize(size);
+
+    const conv1 = conversations.length > 0 ? conversations[0] : undefined;
+    const conv2 = conversations.length > 1 ? conversations[1] : undefined;
+    const name1 = conv1?.name || conv1?.id || undefined;
+    const name2 = conv2?.name || conv2?.id || undefined;
+
+    // use the 2 first members as group avatars
+    return (
+      <div className="module-avatar__icon-closed">
         <Avatar
-          avatarPath={conv.avatarPath}
-          name={name}
-          size={size}
-          pubkey={conv.id}
+          avatarPath={conv1?.avatarPath}
+          name={name1}
+          size={avatarsDiameter}
+          pubkey={conv1?.id}
         />
-      );
-    } else if (conversations.length > 1) {
-      // in a closed group avatar, each visible avatar member size is 2/3 of the group avatar in size
-      // Always use the size directly under the one requested
-      let avatarsDiameter = 0;
-      switch (size) {
-        case 36: {
-          avatarsDiameter = 28;
-          break;
-        }
-        case 48: {
-          avatarsDiameter = 36;
-          break;
-        }
-        case 64: {
-          avatarsDiameter = 48;
-          break;
-        }
-        case 80: {
-          avatarsDiameter = 64;
-          break;
-        }
-        case 300: {
-          avatarsDiameter = 80;
-          break;
-        }
-        default:
-          throw new Error(
-            `Invalid size request for closed group avatar: ${size}`
-          );
-      }
-      const conv1 = conversations[0];
-      const conv2 = conversations[1];
-      const name1 = conv1.name || conv1.id;
-      const name2 = conv2.name || conv2.id;
-
-      // use the 2 first members as group avatars
-      return (
-        <div className="module-avatar__icon-closed">
-          <Avatar
-            avatarPath={conv1.avatarPath}
-            name={name1}
-            size={avatarsDiameter}
-            pubkey={conv1.id}
-          />
-          <Avatar
-            avatarPath={conv2.avatarPath}
-            name={name2}
-            size={avatarsDiameter}
-            pubkey={conv2.id}
-          />
-        </div>
-      );
-    } else {
-      return <></>;
-    }
+        <Avatar
+          avatarPath={conv2?.avatarPath}
+          name={name2}
+          size={avatarsDiameter}
+          pubkey={conv2?.id}
+        />
+      </div>
+    );
   }
 }