fix: Character limit error is not shown for sanskrit characters#83158
fix: Character limit error is not shown for sanskrit characters#83158truph01 wants to merge 4 commits intoExpensify:mainfrom
Conversation
|
@hoangzinh Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
| ]} | ||
| /> | ||
| isLoading ? ( | ||
| <FullScreenLoadingIndicator /> |
There was a problem hiding this comment.
❌ UI-1 (docs)
FullScreenLoadingIndicator is used here in the same JSX tree as HeaderWithBackButton (which is always rendered above). Since the header with its back button provides navigation for the user to escape if loading hangs, you should use ActivityIndicator instead.
Replace:
isLoading ? (
<FullScreenLoadingIndicator />
) : (With something like:
isLoading ? (
<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
<ActivityIndicator size="large" />
</View>
) : (Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
Code ReviewIssues Found1. Import ordering and style in ImportTransactionsCardNamePage.tsx (line 19) The new @libs/ValidationUtils import is placed after the @src/ imports, breaking the import grouping convention. It should be grouped with the other @libs/ imports (lines 13-15). Also, the brace spacing should use no spaces inside braces per codebase convention. Fix: Move to after line 15 (the Navigation import), before @src/ imports, as {isValidInputLength} instead of { isValidInputLength }. 2. UX concern: byte length shown as character count in ImportTransactionsCardNamePage.tsx (line 40) isValidInputLength validates using UTF-8 byte length, so byteLength represents bytes, not characters. However, the error message characterLimitExceedCounter displays Character limit exceeded (X/Y) - showing byte counts (e.g., 300/100 for ~50-char Sanskrit string where each char is 3 bytes) will confuse users. This pattern exists elsewhere (e.g., IOURequestStepMerchant with MERCHANT_NAME_MAX_BYTES = 255), but there the constant clearly signals a byte limit. Here, TITLE_CHARACTER_LIMIT = 100 reads as a character limit. Consider updating the error copy or displaying character count alongside byte validation. 3. Loading state in WorkspaceExpensifyCardListPage.tsx (line 259) FullScreenLoadingIndicator is rendered inside a page that already has a HeaderWithBackButton. If loading hangs, the user sees a spinner covering the content area. Consider whether a non-full-screen indicator would be more appropriate. Minor NotesThe loading state changes appear to be a separate concern from the Sanskrit character limit fix. Bundling unrelated fixes can make review and reverts harder. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 305c5204eb
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| isLoading ? ( | ||
| <FullScreenLoadingIndicator /> |
There was a problem hiding this comment.
Keep header back button usable during empty-list loading
Rendering FullScreenLoadingIndicator directly in this branch blocks navigation while cardsList is empty and isLoading is true, because that component uses an absolute-fill overlay (StyleSheet.absoluteFillObject) and is a sibling of HeaderWithBackButton in this screen. In slow/unstable online requests, users with a verified card account but no cached cards can get stuck without being able to tap the back button until the read finishes/fails.
Useful? React with 👍 / 👎.
Explanation of Change
Fixed Issues
$ #82487
PROPOSAL: #82487 (comment)
Tests
Pre-condition: Login with an expensifail account with an Expensify card added (virtual)
Offline tests
QA Steps
// TODO: These must be filled out, or the issue title must include ""[No QA].""
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2026-02-22.at.17.44.20.mov
Android: mWeb Chrome
Screen.Recording.2026-02-22.at.17.45.33.mov
iOS: Native
Screen.Recording.2026-02-22.at.17.39.33.mov
iOS: mWeb Safari
Screen.Recording.2026-02-22.at.17.43.13.mov
MacOS: Chrome / Safari
Screen.Recording.2026-02-22.at.17.25.24.mov