Page MenuHomePhabricator
Differential D3877

[web] Memoize `Chat` component
ClosedPublic
Actions

Authored by • jacek on Apr 29 2022, 7:05 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 31, 3:53 PM
Unknown Object (File)
Sun, Mar 30, 11:05 PM
Unknown Object (File)
Fri, Mar 28, 1:21 PM
Unknown Object (File)
Thu, Mar 27, 6:26 AM
Unknown Object (File)
Wed, Mar 26, 2:48 AM
Unknown Object (File)
Wed, Mar 26, 2:48 AM
Unknown Object (File)
Tue, Mar 25, 2:40 AM
Unknown Object (File)
Mar 2 2025, 2:32 AM
View All Files
Subscribers
• abosh
• adrian
ashoat
atul

Details

Reviewers
tomek
atul
• benschac
Commits
rCOMMb79a177080f0: [web] Memoize `Chat` component
Summary

Memoize Chat component to improve performance as described in:
https://linear.app/comm/issue/ENG-1062/add-memoization-to-chat-component-in-web

Test Plan

Run web app, tested the performance when opening modals and checked if app behavior remains unchanged.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
web/
chat/
4 lines

Diff 12326

View Options

web/chat/chat.react.js

Show All 10 Lines
div.messageActionContainer { div.messageActionContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
border-radius: 8px; border-radius: 8px;
width: fit-content; width: fit-content;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.messageActionButtons { div.messageActionButtons {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
} }
div.messageActionButtons svg { div.messageActionButtons svg {
padding: 10px 6px 6px; padding: 10px 6px 6px;
Show All 17 Linesdiv.messageTooltipLabel {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--message-action-tooltip-bg); background-color: var(--message-action-tooltip-bg);
color: var(--tool-tip-color); color: var(--tool-tip-color);
border-radius: 8px; border-radius: 8px;
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
} }
div.leftTooltipAlign { div.leftTooltipAlign {
align-items: flex-start; align-items: flex-start;
} }
div.centerTooltipAlign { div.centerTooltipAlign {
align-items: center; align-items: center;
Show All 10 Lines