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

[kryputh]

Summary

Improve the existing OTP Module surface. This issue is intentionally scoped to existing app code and should not introduce a new standalone tool or unrelated feature.

Current area

OTP detection, OTP card rendering, copy behavior, expiry messaging, and OTP visual states

Relevant paths

• src/features/otp/detectOtp.ts
• src/features/otp/components/OTPCard.tsx
• src/features/otp/styles.css

Goal

tighten the current OTP detection and display experience around security-sensitive mail.

Work focus

Reduce unnecessary render work and perceived latency in the current implementation. Prefer memoization, derived data cleanup, smaller loops, and loading skeleton improvements over broad rewrites.

Acceptance criteria

• Identify the current render or data-flow hotspot before changing code.
• Avoid broad refactors; keep the optimization scoped to the listed paths.
• No visible regression in empty, loading, populated, and error states.
• Add a short PR note describing the measured or reasoned performance win.

Scope guardrails

• Keep the work inside the relevant existing app/module paths above unless a small shared helper is clearly justified.
• Do not add a new V1/V2 tool folder for this issue.
• Do not use real user data, secrets, private keys, or live customer mail.
• Keep copy and UI aligned with the Stealth Mail safety, speed, and sender-control positioning.

Suggested validation

• Run the most relevant unit or e2e tests for the touched area.
• Run �un x tsc --noEmit and �un run lint when the local environment supports the project dependency install.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.

[Babigdk]

Hi team,

I’m interested in working on this issue. I have experience optimizing React component performance and improving data-heavy UI flows in production applications.

For this task, I will:

• Profile the OTP detection and rendering flow to identify performance hotspots
• Reduce unnecessary re-renders using memoization and derived-state cleanup where appropriate
• Optimize OTP parsing logic in detectOtp.ts with lighter loops and safer data handling
• Improve OTPCard rendering performance with focused updates instead of broad refactors
• Enhance loading/skeleton states to reduce perceived latency
• Ensure no regression across empty, loading, populated, and error states
• Add a short PR note explaining the performance improvement approach

I will keep changes strictly within the existing OTP module and focus on safe, measurable improvements without altering core behavior.