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

[hemraj-007]

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.

[coderabbitai]

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

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