Message Requests improvements

ts/components/conversation/ConversationHero.tsx

@@ -13,6 +13,7 @@ export type Props = {
   membersCount?: number;
   phoneNumber?: string;
   onHeightChange?: () => unknown;
+  updateSharedGroups?: () => unknown;
 } & Omit<AvatarProps, 'onClick' | 'size' | 'noteToSelf'>;
 
 const renderMembershipRow = ({
@@ -113,6 +114,7 @@ export const ConversationHero = ({
   profileName,
   title,
   onHeightChange,
+  updateSharedGroups,
 }: Props) => {
   const firstRenderRef = React.useRef(true);
 
@@ -121,6 +123,11 @@ export const ConversationHero = ({
     // component may have changed. The cleanup function notifies listeners of
     // any potential height changes.
     return () => {
+      // Kick off the expensive hydration of the current sharedGroupNames
+      if (updateSharedGroups) {
+        updateSharedGroups();
+      }
+
       if (onHeightChange && !firstRenderRef.current) {
         onHeightChange();
       } else {
@@ -135,7 +142,7 @@ export const ConversationHero = ({
     `mc-${membersCount}`,
     `n-${name}`,
     `pn-${profileName}`,
-    ...sharedGroupNames.map(g => `g-${g}`),
+    sharedGroupNames.map(g => `g-${g}`).join(' '),
   ]);
 
   const phoneNumberOnly = Boolean(

ts/components/conversation/Timeline.tsx

@@ -50,7 +50,11 @@ type PropsHousekeepingType = {
     actions: Object
   ) => JSX.Element;
   renderLastSeenIndicator: (id: string) => JSX.Element;
-  renderHeroRow: (id: string, resizeHeroRow: () => unknown) => JSX.Element;
+  renderHeroRow: (
+    id: string,
+    resizeHeroRow: () => unknown,
+    updateSharedGroups: () => unknown
+  ) => JSX.Element;
   renderLoadingRow: (id: string) => JSX.Element;
   renderTypingBubble: (id: string) => JSX.Element;
 };
@@ -70,6 +74,7 @@ type PropsActionsType = {
   markMessageRead: (messageId: string) => unknown;
   selectMessage: (messageId: string, conversationId: string) => unknown;
   clearSelectedMessage: () => unknown;
+  updateSharedGroups: () => unknown;
 } & MessageActionsType &
   SafetyNumberActionsType;
 
@@ -510,6 +515,7 @@ export class Timeline extends React.PureComponent<Props, State> {
       renderLoadingRow,
       renderLastSeenIndicator,
       renderTypingBubble,
+      updateSharedGroups,
     } = this.props;
 
     const styleWithWidth = {
@@ -524,7 +530,7 @@ export class Timeline extends React.PureComponent<Props, State> {
     if (haveOldest && row === 0) {
       rowContents = (
         <div data-row={row} style={styleWithWidth} role="row">
-          {renderHeroRow(id, this.resizeHeroRow)}
+          {renderHeroRow(id, this.resizeHeroRow, updateSharedGroups)}
         </div>
       );
     } else if (!haveOldest && row === 0) {