Skip to content

Trim render work#1276

Open
gloskull wants to merge 5 commits into
Stellar-Mail:mainfrom
gloskull:trim-render-work
Open

Trim render work#1276
gloskull wants to merge 5 commits into
Stellar-Mail:mainfrom
gloskull:trim-render-work

Conversation

@gloskull

Copy link
Copy Markdown

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

gloskull and others added 5 commits June 26, 2026 08:37
…formance

Optimize OTP detection and card rendering
Modified `eslint.config.js` to include the `tools/` directory in relaxed rules for `any` usage and non-component exports. Removed redundant `eslint-disable` directives in `src/` and `tools/` that were causing "unused directive" warnings. Verified that all client checks (format, lint, tsc, test, build) pass locally.

Co-authored-by: gloskull <189399494+gloskull@users.noreply.github.com>
…9847740322615576

Resolve CI Client Check failures (linting)
@gloskull

Copy link
Copy Markdown
Author

Done with this issue.
Please merge and give and high review.
Please if there are any more tasks, assign them to me, i'd make sure to get them done quickly and submit my PR's in under 5 hours

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Existing app][OTP Module] Trim render work and loading latency

1 participant