Trim render work#1276
Open
gloskull wants to merge 2 commits into
Open
Conversation
…formance Optimize OTP detection and card rendering
Author
|
Done resolving this issue. Please merge and give an high review. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Reduce unnecessary CPU and render work in the OTP surface to lower perceived latency while keeping the existing UI and behaviors intact.
Scope changes to the existing OTP module (src/features/otp/*) and avoid broad refactors or new tooling.
Description
Tightened detectOtp by hoisting regexes into module-level constants and scanning only a bounded window near the first security-related keyword using MAX_SECURITY_CODE_SCAN_LENGTH to avoid scanning very long message bodies on every render.
Converted OTPCard into a memoized component with memo, hoisted the card animation constants, and shortened the entrance transition (duration reduced), so re-renders when code is unchanged do less work.
Memoized derived values and handlers in OTPCard by using useMemo for digits, useCallback for handleCopy with a useRef timeout reset, and precomputed DIAL_TICKS for the padlock SVG instead of recomputing per render; also memoized the PadlockIcon.
Trimmed some expensive visual filters in src/features/otp/styles.css (reduced blur/backdrop-filter intensity) to lower GPU/paint cost while preserving the visual surface and copy/UI text.
Testing
Ran npx prettier --write src/features/otp/detectOtp.ts src/features/otp/components/OTPCard.tsx src/features/otp/styles.css successfully.
Ran npm run lint which completed and reported existing warnings outside the OTP scope but no new errors.
Ran npx tsc --noEmit which succeeded with no type errors.
Ran unit tests with npm test which passed: 31 test files and 376 tests all succeeded.
Closes #988