Performance: chat input by hannojg · Pull Request #25758 · Expensify/App

hannojg · 2023-08-23T12:00:54Z

Details

This PR improves the performance of the ReportActionCompose component greatly.
The main improvement is that we moved state down into separated components. In the ReportActionCompose component we render a lot of items, such as the send button, emoji button, a menu for attachments, attachment picker popups, the composer itself, comment exceeding notice, mention suggestions, emoji suggestions, etc. When we entered one letter all the top level state was updated multiple times, leading to a lot of re-renders of all the mentioned components.

So, to achieve a better performance we needed to break out more separate components. This also cleaned up the ReportActionCompose component, it went down from 1362 lines to 410 lines, thus becoming a lot easier to read and maintain.

However, this made the PR a bit larger than anticipated. The following gives an overview of the changes to help review this PR.

Note

I'd recommend first looking at the code itself and understanding its structure, and then checking the specific diffs of this PR.

The ReportActionCompose was moved into its own folder under src/pages/home/report/ReportActionCompose. Here are all new split out components placed:

SendButton.js: The JSX of the send button was moved into its own component for cleanup
Suggestions.js: Before the mention and emoji suggestions were part of the main composer, and also their state was placed there. The composer itself doesn't have to re-render when we change the suggestion state, so it was moved into its own component.
- SuggestionMention.js: Before the mention suggestion were re-rendering when e.g. the emoji suggestions were changing. Now they are decoupled into their own places.
- SuggestionEmoji.js: Separate implementation for emoji suggestions
AttachmentPickerWithMenuItems.js: This contains the options we show when pressing the + in the composer. The options need access to the attachment picker, so they are grouped together. They also had state that's unnecessary to other parts of the composer.
ComposerWithSuggestions.js: Here lives the actual <Composer /> and its value and selection state. Only the <Composer /> and the <Suggestions /> need to re-render when any of the two states are changing, hence they are grouped together.
SilentCommentUpdater.js: This components subscribes to the actual draft comment, and fires a side effect for certain conditions. For the other components we don't need the draft comment, so it makes no sense re-rendering these. That's why it was split out into its own component for performance.

Another note: Initially I wanted to make separate PRs for each split out component, but: the components were so entangled with each other, that it was only possible to make a full clean up 🍝😅 .

Fixed Issues

$ #25763

Tests

Open the expensify desktop app
Let the app open, login, navigate to a chat
(If you have a powerful PC and usually don't experience a lag typing:)

Open the developer tools
Go to performance
Enable CPU Throttle: 6x
Enable Hardware concurrency limit: 8

Just press your keys as fast as you can (typing random stuff)
Notice, that there is a lag while typing
Checkout this branch / changes
Run the same steps 2.-5. as above and confirm that the lag is gone (Note: There might be a lag for the very first letter that you type, for which this PR doesn't optimise)

From `main` branch

main.mov

From this branch

improved.mov

Offline tests

n/a

QA Steps

Run every test for the composer and check that there are no regressions.

PR Author Checklist

Screenshots/Videos

Web

Screen.Recording.2023-08-23.at.12.15.57.mov

Mobile Web - Chrome

Screen.Recording.2023-08-23.at.12.15.24.mov

Mobile Web - Safari

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-23.at.12.20.42.mp4

Desktop

improved.mov

iOS

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-08-23.at.12.26.56.mp4

Android

Screen.Recording.2023-08-23.at.12.12.12.mov

…y-app-fork into perf/composer-investigations

…ction' of github.com:margelo/expensify-app-fork into perf/composer-investigations

…y-app-fork into refactor-report-action-compose

…ction' into refactor-report-action-compose

This reverts commit eb9baf8.

This reverts commit 9739c08.

move actionButtonRef

…actor-report-action-compose

…y-app-fork into refactor-report-action-compose

…ction' of github.com:margelo/expensify-app-fork into refactor-report-action-compose

OSBotify · 2023-08-30T01:18:35Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.58-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-30T01:57:00Z

🚀 Deployed to staging by https://github.com/mountiny in version: 1.3.59-0 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-31T01:57:18Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.59-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

fedirjh · 2023-09-05T16:45:31Z

src/pages/home/report/ReportActionCompose.js

-
-    const reportRecipient = personalDetails[participantsWithoutExpensifyAccountIDs[0]];
-    const shouldUseFocusedColor = !isBlockedFromConcierge && !disabled && isFocused;
-    const isFullSizeComposerAvailable = isFullComposerAvailable && !_.isEmpty(value);


cc @hannojg It looks like the logic within this line was not preserved and it caused a regression in this issue #25975, more context.

s77rt · 2023-09-06T20:46:07Z

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

+                    maxLines={maxComposerLines}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    onClick={setShouldBlockSuggestionCalc}


Is this intended? Previously we used to set shouldBlockEmojiCalc and shouldBlockMentionCalc to false but now this being set to true.

I dont think there should be change in the behaviour here, not intentionally

jakub-trzebiatowski · 2023-09-21T08:29:43Z

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

+        [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, submitForm, suggestionsRef, valueRef],
+    );
+
+    const onSelectionChange = useCallback(


Coming from #26534

We should've ensured to open the suggestion list only when the composer is focused, to prevent unexpected behavior.

robertKozik · 2023-10-10T08:43:05Z

src/pages/home/report/ReportActionCompose/SendButton.js

+    const {translate} = useLocalize();
+
+    const Tap = Gesture.Tap()
+        .enabled()


Enabled condition was not preserved !(isCommentEmpty || isBlockedFromConcierge || disabled || hasExceededMaxCommentLength) and caused regression #27779

abdulrahuman5196 · 2023-10-10T16:10:17Z

src/libs/ComposerUtils/debouncedSaveReportComment.js

+ * @param {String} reportID
+ * @param {String} comment
+ */
+const debouncedSaveReportComment = _.debounce((reportID, comment) => {


This caused a regression of showing draft icon - more information here - #27362 (comment)

parasharrajat · 2023-10-26T20:38:28Z

src/pages/home/report/ReportActionCompose/SuggestionMention.js

+            }
+
+            const valueAfterTheCursor = value.substring(selectionEnd);
+            const indexOfFirstWhitespaceCharOrEmojiAfterTheCursor = valueAfterTheCursor.search(CONST.REGEX.NEW_LINE_OR_WHITE_SPACE_OR_EMOJI);


This regex NEW_LINE_OR_WHITE_SPACE_OR_EMOJI never existed which caused #28754

situchan · 2023-11-07T19:18:54Z

As talked already, this caused super minor style regression:
wider gap between mention or emoji suggestion box and composer

burczu · 2024-01-08T08:25:03Z

It seems like it caused this regression as well: #30921 (discrepancy between create and edit mode in terms of shown max message length limit error).

eVoloshchak · 2024-02-03T16:37:20Z

src/pages/home/report/ReportActionCompose/SuggestionEmoji.js

+
+    const [highlightedEmojiIndex, setHighlightedEmojiIndex] = useArrowKeyFocusManager({
+        isActive: isEmojiSuggestionsMenuVisible,
+        maxIndex: SuggestionsUtils.getMaxArrowIndex(suggestionValues.suggestedEmojis.length, isAutoSuggestionPickerLarge),


👋 Coming from #33613
SuggestionsUtils.getMaxArrowIndex did return visible list length (instead of true list length), which meant that you couldn't scroll past the visible items using a keyboard
We resolved this with
maxIndex: suggestionValues.suggestedMentions.length - 1

getusha · 2024-04-21T10:14:44Z

src/pages/home/report/ReportActionCompose/SilentCommentUpdater.js

+    useEffect(() => {
+        // Value state does not have the same value as comment props when the comment gets changed from another tab.
+        // In this case, we should synchronize the value between tabs.
+        const shouldSyncComment = prevCommentProp !== comment && value !== comment;


this caused a race where some characters will be skipped when typing on the same interval - more info #37356

hungvu193 · 2024-06-11T11:31:38Z

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

+        (text, shouldAddTrailSpace = true) => {
+            const updatedText = shouldAddTrailSpace ? `${text} ` : text;
+            const selectionSpaceLength = shouldAddTrailSpace ? CONST.SPACE_LENGTH : 0;
+            updateComment(ComposerUtils.insertText(commentRef.current, selection, updatedText));


This line caused this issue:
#41778

More detail about the RCA here:
#41778 (comment)

hannojg added 30 commits August 4, 2023 11:50

Merge branch 'migrate-composer-fc-web' of github.com:margelo/expensif…

17d4889

…y-app-fork into perf/composer-investigations

Merge branch '@stas-kravchuk/16263-migrate-reportactioncompose-to-fun…

91b7d91

…ction' of github.com:margelo/expensify-app-fork into perf/composer-investigations

move reportactioncompose to own folder

9f1cac2

first refactor

12405c3

temp: hack good performance

0cab4a4

Merge branch '@stas-kravchuk/16263-migrate-reportactioncompose-to-fun…

9a8201b

…ction' of github.com:margelo/expensify-app-fork into perf/composer-investigations

fix issues after

ea26c2c

enabled suggestions

b002f08

add value prop back

5042b4b

use insertedEmojis ref correctly

1bf0177

add selection change back

3ab1ca4

fix issue with menu closing instantly

9ec7169

pass callbacks

cfc7b25

call bloc calculations

e7d3a95

wip

1156d61

Merge branch 'migrate-composer-fc-web' of github.com:margelo/expensif…

eb2892c

…y-app-fork into refactor-report-action-compose

Merge branch '@stas-kravchuk/16263-migrate-reportactioncompose-to-fun…

a7a489a

…ction' into refactor-report-action-compose

fix split implementations of suggestions

e247161

wip: split out SendButton & AttachmentPickerWithMenu

9739c08

wip: simplify code

eb9baf8

Revert "wip: simplify code"

6673ba4

This reverts commit eb9baf8.

Revert "wip: split out SendButton & AttachmentPickerWithMenu"

730f4c9

This reverts commit 9739c08.

Split out SendButton component

b846cbe

wip: splitting out AttachmentPicker

33b8e4b

wip: splitting out AttachmentPicker

45a8842

wip: split out SendButton & AttachmentPickerWithMenu

ba38175

move actionButtonRef

wip: move menu items calc to separate component

433d616

Merge branch 'main' of github.com:margelo/expensify-app-fork into ref…

3e957a3

…actor-report-action-compose

Merge branch 'migrate-composer-fc-web' of github.com:margelo/expensif…

74bd410

…y-app-fork into refactor-report-action-compose

Merge branch '@stas-kravchuk/16263-migrate-reportactioncompose-to-fun…

ff18a4f

…ction' of github.com:margelo/expensify-app-fork into refactor-report-action-compose

hannojg mentioned this pull request Aug 30, 2023

Web - App focus on compose box even when edit message is present #26319

Closed

6 tasks

kavimuru mentioned this pull request Sep 2, 2023

[HOLD for payment 2023-09-18] [$500] Dev: console error if we open RHN page directly #26561

Closed

6 tasks

fedirjh reviewed Sep 5, 2023

View reviewed changes

dummy-1111 mentioned this pull request Sep 6, 2023

[HOLD for payment 2023-09-21] [$500] Emoji suggestion/email mentions open and close on opening assign task/request money in chat #26489

Closed

6 tasks

s77rt reviewed Sep 6, 2023

View reviewed changes

dummy-1111 mentioned this pull request Sep 9, 2023

[HOLD for payment 2023-10-09] [$500] Chat - Mentioning a user in new offline conversation displays user picker transparent #27036

Closed

6 tasks

fedirjh mentioned this pull request Sep 12, 2023

[HOLD for payment 2023-09-18] [$1000] Android App - The resizing icon doesn't disappear immediately after sending the message #25975

Closed

6 tasks

jakub-trzebiatowski reviewed Sep 21, 2023

View reviewed changes

jakub-trzebiatowski mentioned this pull request Sep 21, 2023

[HOLD for payment 2023-09-27] [$500] IOS - Mention list open again after requesting money #26534

Closed

6 tasks

Pujan92 mentioned this pull request Sep 26, 2023

[HOLD for payment 2023-11-06] [$500] Dev - wider gap between mention or emoji suggestion box and composer #26393

Closed

6 tasks

paultsimura mentioned this pull request Oct 3, 2023

[HOLD for payment 2023-10-25] [$500] Chat - App closes mention suggestions when cursor is between double @ #28754

Closed

6 tasks

fedirjh mentioned this pull request Oct 6, 2023

[PAID] [$500] Web - Composer send button is enabled even when the input contains only space #26433

Closed

6 tasks

robertKozik reviewed Oct 10, 2023

View reviewed changes

robertKozik mentioned this pull request Oct 10, 2023

[HOLD for payment 2023-10-16] Chat - Expand button disappear after clicking even when composer has error #27779

Closed

6 tasks

abdulrahuman5196 reviewed Oct 10, 2023

View reviewed changes

abdulrahuman5196 mentioned this pull request Oct 10, 2023

[HOLD for payment 2023-10-12] [$500] DEV: Web - Draft icon show even there is not any thing in input field #27362

Closed

6 tasks

ishpaul777 mentioned this pull request Oct 26, 2023

[HOLD for payment 2023-12-13][$500] Mention(@) and emoji(:) popup does not close when dragging a file #30153

Closed

6 tasks

parasharrajat reviewed Oct 26, 2023

View reviewed changes

bernhardoj mentioned this pull request Nov 6, 2023

[HOLD for payment 2023-12-26] [$500] No error message when editing a chat to go past character limit #30921

Closed

6 tasks

eVoloshchak reviewed Feb 3, 2024

View reviewed changes

eVoloshchak mentioned this pull request Feb 3, 2024

[HOLD for payment 2024-01-31] [$500] Mention - Only 3 user are scrollable when use keyboard to pick user to mention #33613

Closed

6 tasks

getusha reviewed Apr 21, 2024

View reviewed changes

getusha mentioned this pull request Apr 21, 2024

[HOLD for payment 2024-04-15] [$500] Characters missing when typing message in compose box #37356

Closed

6 tasks

hungvu193 reviewed Jun 11, 2024

View reviewed changes

hungvu193 mentioned this pull request Jun 11, 2024

[HOLD for payment 2024-06-11] [$250] Chat - Emoji is deleted if entered quickly after some text #41778

Closed

6 tasks

Conversation

hannojg commented Aug 23, 2023 • edited by mountiny Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

From main branch

From this branch

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

OSBotify commented Aug 30, 2023

Uh oh!

OSBotify commented Aug 30, 2023

Uh oh!

OSBotify commented Aug 31, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

situchan commented Nov 7, 2023

Uh oh!

burczu commented Jan 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

17 participants

hannojg commented Aug 23, 2023 •

edited by mountiny

Loading

From `main` branch

burczu commented Jan 8, 2024 •

edited

Loading