Improve mobile composer input render perf by raymondjacobson · Pull Request #10095 · AudiusProject/apps

raymondjacobson · 2024-10-16T23:11:36Z

Description

The rendering of our custom elements is slower on mobile than web. I think this has to do with the React Native render cycle and bridging that paint back to the host OS. On web this isn't a problem, so when the input text behind where you're typing is transparent, things seem fast and responsive.

On mobile, it feels slow though. The transparent text is laid out almost immediately (yes, controlled inputs are fine), but the "rendered on top" text comes in a few ms later.

What makes this PR possible though ... is I've noticed that painting our rendered UI on top of the input (when transparency is removed) doesn't seem to cause any aliasing or glyph-ing that tends to happen on web (hence the original transparency change). I think that means we don't have to make the input itself have transparent text when we render above it.

This certainly could be a wrong assumption I have... because I haven't tested it exhaustively on all devices... BUT I do think it works from my observation.

So maybe here's how we can evaluate this change:

Before:

Text feels kind of sluggish (only a couple ms delay, but if you type really fast, it feels off)
You will never get into a situation where you see duplicate text

After:

Text feels fast
It is possible for you to see split seconds of "shadow" text where you type something, it autocompletes, the input changes and then the text on top changes. Feels kind of like there's a ghost
It is possible for there to be a major layout bug where the text doesn't line up and you see duplicate text. Though I would argue, we should fix this regardless and it's not unique to this change

I am cool with either

closing PR
merging PR and testing on device
keeping it on the backburner

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

Simulator, extensive logging & spamming

changeset-bot · 2024-10-16T23:11:40Z

⚠️ No Changeset found

Latest commit: 046bd2a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dylanjeffers

Sweet down to try this out

raymondjacobson · 2024-10-16T23:35:15Z

Sweet down to try this out

will merge to try and revert if bad news

[6240380] Fix comment notification data (#10123) Dylan Jeffers [8c9b00b] [QA-1737] Center user links in collection and user cards (#10122) Dylan Jeffers [109abfa] [C-5197] Fix native comment show more/less collapse (#10121) Dylan Jeffers [c971230] [C-5212] Open comment drawer from empty state (#10117) Sebastian Klingler [528102b] Fix discovery comment notifications (#10119) Dylan Jeffers [9fe6c66] [PAY-3522] Hides keyboard when opening purchase drawer from a DM (#10116) Randy Schott [69e73dd] Re-land changes to fix RN on xcode 16 (#10108) Randy Schott [906dc0b] [QA-1773] Fix corner overflow on GiantTrackTile (#10110) Andrew Mendelsohn [7f97ca2] [C-5209] Missing $ on downloads button (#10111) Andrew Mendelsohn [b3e1982] Drop Android InputAccessoryView (#10107) Dylan Jeffers [9bd3d6c] [C-5189] Fix mobile web skeletons (#10106) JD Francis [ee775d1] Fix mobile cursor position (#10104) Dylan Jeffers [761524e] Various comment reply fixes (muting/reporting) (#10096) JD Francis [98e7bd5] Add CommentDrawerContext to manage drawer state with navigation (#10103) Sebastian Klingler [e488758] [C-5203] Fix comment unpin (#10102) Dylan Jeffers [e8cdd08] Update mobile versions to 119 (#10101) Dylan Jeffers [966246f] [C-5137] Set android cursor position when replying/editing (#10091) Sebastian Klingler [127070e] Revert "Update DN to use shortened rewards challenge IDs and specifiers (#9803)" (#10099) Marcus Pasell [a921f74] [C-5112] Dismiss keyboard when pressing in comment drawer (#10093) Sebastian Klingler [d65ce1f] Improve mobile composer input render perf (#10095) Raymond Jacobson [2b0c76c] [PAY-3525] Fix text overflow (#10072) Farid Salau [ddd3f94] Fix chat header too long on mobile (#10089) Reed [42553e6] [PAY-3507] Skeleton for profile dms button (#10090) Andrew Mendelsohn [abf3634] Update DN to use shortened rewards challenge IDs and specifiers (#9803) Marcus Pasell [4b293d8] [C-5193] Add cancel button to comment replies and edits (#10080) Kyle Shanks [c5fd316] [C-5191] Add background color to comment cancel accessory view (#10078) Kyle Shanks [2f3b7ab] [PAY-3456] Fix chat last message sometimes wrong (#10084) Reed [0ac87a0] [PAY-3519] Fix mobile ChatBlastSubHeader opacity (#10079) Reed [9f3804b] Fix android animated icons (#10085) Dylan Jeffers [c0eca98] [PAY-3526] Hide scroll on message inbox (#10083) Farid Salau [f580ff7] [PAY-3509] Show InboxUnavailableModal instead of disabled button (#10081) Andrew Mendelsohn [3ae1af1] [PAY-3521] Fix offset calculation for Blast CTA (#10076) Andrew Mendelsohn [814fa37] Highlight user mentions when editing comments on web (#10077) Kyle Shanks [3144eac] [PAY-3424] Restrict imports from SDK 'dist' folder in client code (#10043) Randy Schott [8aa7242] [PAY-3523] Fix bug where share to DM persists in input (#10070) Raymond Jacobson [9812ee2] Update dapp-store build artifacts audius-infra [bfd21d8] Fix mobile lint (#10071) Raymond Jacobson [55c22f4] [PAY-3466] Improve composer input responsiveness on mobile (#10066) Raymond Jacobson [3c0ce0f] [QA-1762] Fix desktop app support on MacOS Sequoia (#10059) Raymond Jacobson [af09710] [C-5167] Improve mobile comments perf (#10067) Sebastian Klingler [29e9b01] [C-5178] Show newlines in comments (#10065) Isaac Solo [61e8734] Fix comment unauthed state (#10061) JD Francis [d355040] Fix lint (#10064) Andrew Mendelsohn [7023824] [PAY-3520] Fix error on blast analytics (#10063) Andrew Mendelsohn [4588410] [C-5166] [C-5108] [C-5156] Address comment QA issues (#10047) Sebastian Klingler [7494a1a] [PAY-3437] Add names to chats sentry reports (#10049) Reed [856d223] [PAY-3347] Analytics for create chat blast funnel (#10053) Andrew Mendelsohn [6401b5c] [PAY-3483] Update 'ChatListBlastItem' UI on smaller screens (#10057) Farid Salau [058e233] [C-5172] Fix comments timezone (#10052) Isaac Solo [7ce770c] [C-5155] Add cancel accessory to mobile ComposerInput for comments (#10058) Kyle Shanks [f992ddb] [C-5173] Fix sort by top comments out of date (#10055) JD Francis [bf6b4a8] [C-5184] Add border to Harmony PopoverMenu (#10050) Kyle Shanks [c1a5488] [C-5161 C-5151] Improve desktop track page responsiveness (#10040) Dylan Jeffers [5de96ce] [C-5141] Generate comment id in onMutate (#10031) Dylan Jeffers [db3f11a] [⚠️] Separate SDK and legacy libs (#9972) Raymond Jacobson [e01490c] Fix withdrawals not showing coinflow modal (#10051) Marcus Pasell [1cce513] Remove follows you badge from comment settings (#10024) Isaac Solo [cb76182] [C-5165] Update comment notifications to open the comment drawer (#10039) Dylan Jeffers [7e7acc9] [QA-1761] Fix mobile profile page username spacing (#10038) Dylan Jeffers [59a1d97] [C-5040] Enable animated mobile icons (#10037) Dylan Jeffers [4d09265] [C-5164] Add max height to mobile ComposerInput (#10044) Kyle Shanks [7d7008c] [C-5153] Update ComposerInput to not render the display layer unless there is highlighted text (#10042) Kyle Shanks [e72e207] Upgrade mobile version to 1.1.118 (#10035) Dylan Jeffers

Improve mobile composer input render perf

046bd2a

pull-request-size bot added the size/XS label Oct 16, 2024

raymondjacobson requested review from Kyle-Shanks and dylanjeffers October 16, 2024 23:11

dylanjeffers approved these changes Oct 16, 2024

View reviewed changes

raymondjacobson merged commit d65ce1f into main Oct 16, 2024

raymondjacobson deleted the rj-input-mobile-perf branch October 16, 2024 23:36

samgutentag pushed a commit that referenced this pull request Nov 1, 2024

Improve mobile composer input render perf (#10095)

64860e2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve mobile composer input render perf#10095

Improve mobile composer input render perf#10095
raymondjacobson merged 1 commit intomainfrom
rj-input-mobile-perf

raymondjacobson commented Oct 16, 2024

Uh oh!

changeset-bot bot commented Oct 16, 2024

Uh oh!

dylanjeffers left a comment

Uh oh!

raymondjacobson commented Oct 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

raymondjacobson commented Oct 16, 2024

Description

How Has This Been Tested?

Uh oh!

changeset-bot bot commented Oct 16, 2024

⚠️ No Changeset found

Uh oh!

dylanjeffers left a comment

Choose a reason for hiding this comment

Uh oh!

raymondjacobson commented Oct 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants