FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix: yield to paint before submit validation so isSubmitting UI shows by hemraj-007 · Pull Request #2209 · TanStack/form · GitHub

/ form Public

fix: yield to paint before submit validation so isSubmitting UI shows - #2209

Open
hemraj-007 wants to merge 2 commits into
TanStack:mainfrom
hemraj-007:fix/is-submitting-paint-1967
ConversationCommits (2)ChecksFiles changed
Open

fix: yield to paint before submit validation so isSubmitting UI shows#2209
hemraj-007 wants to merge 2 commits into
TanStack:mainfrom
hemraj-007:fix/is-submitting-paint-1967

Conversation

hemraj-007 commented Jun 6, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Fixes #1967 by awaiting a browser paint cycle after setting isSubmitting and before onSubmitAsync runs, so loading spinners render in time.

🎯 Changes

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • New Features

    • Form submission now yields to the browser paint cycle so loading indicators render immediately when a submit begins, before async validation or submit handlers run.

  • Tests

    • Added tests ensuring the immediate loading state is visible during async form submission.

  • Chores

    • Patch version bumps for related form packages.

fix: yield to paint before submit validation so isSubmitting UI shows
b98b76f 
Fixes TanStack#1967 by awaiting a browser paint cycle after setting isSubmitting
and before onSubmitAsync runs, so loading spinners render in time.

Co-authored-by: Cursor <cursoragent@cursor.com>

coderabbitai Bot commented Jun 6, 2026 •
edited
Loading

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info ⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5793d21c-e90e-4bbc-9488-f0bb31d8ef87

📥 Commits

Reviewing files that changed from the base of the PR and between b98b76f and cc8a1a7.

📒 Files selected for processing (1)
  • packages/form-core/src/utils.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/form-core/src/utils.ts
📝 Walkthrough

Walkthrough

Adds a new yieldToPaint() utility and awaits it in form submission handlers so the browser can paint isSubmitting UI before submit-time validation and onSubmitAsync run. Tests and a changeset document the behavior and version bumps.

Changes

Browser Paint Timing for Form Submission

Layer / File(s) Summary
yieldToPaint timing utility
packages/form-core/src/utils.ts, packages/form-core/tests/utils.spec.ts		 New yieldToPaint() export that uses double requestAnimationFrame in browsers (unless Vitest) or queueMicrotask fallback; unit test added.
Form submission handler integration
packages/form-core/src/FormApi.ts, packages/form-core/src/FormGroupApi.ts		 Both _handleSubmit methods now import and await yieldToPaint() immediately before validateAllFields('submit'), inserting a yield point after isSubmitting is set.
React integration test
packages/react-form/tests/useForm.test.tsx		 New test verifies the submit button shows Loading (driven by state.isSubmitting) before onSubmitAsync completes.
Release documentation
.changeset/is-submitting-paint.md		 Changeset bumps patch versions for @tanstack/*-form packages and documents the paint-yield behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I waited two frames for paint to bloom,
So spinners wake before the async zoom,
A tiny pause, a faithful art,
That gives the loader its small part,
Hooray — the UI and async start in tune!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and accurately summarizes the main change: yielding to paint before submit validation to ensure isSubmitting UI shows.
Description check ✅ Passed The description follows the template with all required sections complete: Changes section references issue #1967, checklist items are checked, and release impact is properly documented.
Linked Issues check ✅ Passed The code changes fully implement the fix for issue #1967: yieldToPaint utility yields to browser paint cycle, FormApi and FormGroupApi call it before validation, and tests verify the behavior.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing the isSubmitting UI timing issue: utility function, integration in submission handlers, tests, and changeset documentation.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches 🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai Bot reviewed Jun 6, 2026
View reviewed changes

coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/form-core/src/utils.ts`:
- Around line 748-751: The docstring above the yield utility (the comment
beginning "Yields so UI updates (e.g. isSubmitting spinners) can paint before
submit validation runs. Uses double requestAnimationFrame in browsers and
setTimeout(0) elsewhere (tests, SSR).") is inaccurate: the implementation uses
queueMicrotask for the non-browser/test fallback. Update that docstring to
reflect the actual behavior by replacing "setTimeout(0)" with "queueMicrotask
(microtask queue)" and optionally note that tests/SSR use queueMicrotask rather
than macrotask timing.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info ⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e19336ce-dcfc-4e89-905a-60a53248cc41

📥 Commits

Reviewing files that changed from the base of the PR and between 6a73479 and b98b76f.

📒 Files selected for processing (6)
  • .changeset/is-submitting-paint.md
  • packages/form-core/src/FormApi.ts
  • packages/form-core/src/FormGroupApi.ts
  • packages/form-core/src/utils.ts
  • packages/form-core/tests/utils.spec.ts
  • packages/react-form/tests/useForm.test.tsx

Comment thread packages/form-core/src/utils.ts
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
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

coderabbitai[bot] coderabbitai[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

isSubmitting spinner not visible before onSubmitAsync runs (browser paint timing issue)

1 participant

Back | FazBrowse Home | New Git URL