fix: single sha512 of pubkey per pubkey for avatars

ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { COLORS } from '../../../themes/constants/colors';
 import { getInitials } from '../../../util/getInitials';
+import { allowOnlyOneAtATime } from '../../../session/utils/Promise';
 
 type Props = {
   diameter: number;
@@ -8,13 +9,15 @@ type Props = {
   pubkey: string;
 };
 
-const sha512FromPubkey = async (pubkey: string): Promise<string> => {
-  const buf = await crypto.subtle.digest('SHA-512', new TextEncoder().encode(pubkey));
+const sha512FromPubkeyOneAtAtime = async (pubkey: string) => {
+  return allowOnlyOneAtATime(`sha512FromPubkey-${pubkey}`, async () => {
+    const buf = await crypto.subtle.digest('SHA-512', new TextEncoder().encode(pubkey));
 
-  // tslint:disable: prefer-template restrict-plus-operands
-  return Array.prototype.map
-    .call(new Uint8Array(buf), (x: any) => ('00' + x.toString(16)).slice(-2))
-    .join('');
+    // tslint:disable: prefer-template restrict-plus-operands
+    return Array.prototype.map
+      .call(new Uint8Array(buf), (x: any) => ('00' + x.toString(16)).slice(-2))
+      .join('');
+  });
 };
 
 // do not do this on every avatar, just cache the values so we can reuse them across the app
@@ -46,7 +49,8 @@ function useHashBasedOnPubkey(pubkey: string) {
       }
       return;
     }
-    void sha512FromPubkey(pubkey).then(sha => {
+
+    void sha512FromPubkeyOneAtAtime(pubkey).then(sha => {
       if (isInProgress) {
         setIsLoading(false);
         // Generate the seed simulate the .hashCode as Java

ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx

@@ -45,7 +45,8 @@ function moveUsAtTheEnd(members: Array<string>, us: string) {
 
 function sortAndSlice(sortedMembers: Array<string>, us: string) {
   const usAtTheEndIfNeeded = moveUsAtTheEnd(sortedMembers, us); // make sure we are not one of the first 2 members if there is enough members
-  return usAtTheEndIfNeeded.slice(0, 2); // we render at most 2 avatars for closed groups
+  // we render at most 2 avatars for closed groups
+  return { firstMember: usAtTheEndIfNeeded?.[0], secondMember: usAtTheEndIfNeeded?.[1] };
 }
 
 function useGroupMembersAvatars(convoId: string | undefined) {
@@ -60,26 +61,24 @@ function useGroupMembersAvatars(convoId: string | undefined) {
   return sortAndSlice(sortedMembers, us);
 }
 
-export const ClosedGroupAvatar = React.memo(
-  ({
-    convoId,
-    size,
-    onAvatarClick,
-  }: {
-    size: number;
-    convoId: string;
-    onAvatarClick?: () => void;
-  }) => {
-    const memberAvatars = useGroupMembersAvatars(convoId);
-    const avatarsDiameter = getClosedGroupAvatarsSize(size);
-    const firstMemberId = memberAvatars?.[0] || '';
-    const secondMemberID = memberAvatars?.[1] || '';
+export const ClosedGroupAvatar = ({
+  convoId,
+  size,
+  onAvatarClick,
+}: {
+  size: number;
+  convoId: string;
+  onAvatarClick?: () => void;
+}) => {
+  const memberAvatars = useGroupMembersAvatars(convoId);
+  const avatarsDiameter = getClosedGroupAvatarsSize(size);
+  const firstMemberId = memberAvatars?.firstMember || '';
+  const secondMemberID = memberAvatars?.secondMember || '';
 
-    return (
-      <div className="module-avatar__icon-closed">
-        <Avatar size={avatarsDiameter} pubkey={firstMemberId} onAvatarClick={onAvatarClick} />
-        <Avatar size={avatarsDiameter} pubkey={secondMemberID} onAvatarClick={onAvatarClick} />
-      </div>
-    );
-  }
-);
+  return (
+    <div className="module-avatar__icon-closed">
+      <Avatar size={avatarsDiameter} pubkey={firstMemberId} onAvatarClick={onAvatarClick} />
+      <Avatar size={avatarsDiameter} pubkey={secondMemberID} onAvatarClick={onAvatarClick} />
+    </div>
+  );
+};

ts/hooks/useParamSelector.ts

@@ -288,6 +288,6 @@ export function useSortedGroupMembers(convoId: string | undefined): Array<string
   if (!convoProps || convoProps.isPrivate || convoProps.isPublic) {
     return [];
   }
-  // we need to close it before being able to call sort on it
+  // we need to clone the array before being able to call sort() it
   return compact(convoProps.members?.slice()?.sort()) || [];
 }