fix(admin): add skeleton loader to invite-user Org select by Shreyag02 · Pull Request #1735 · raystack/frontier

Shreyag02 · 2026-07-03T10:19:26Z

Summary

The Organization select in the Users-list "Invite user" dialog did not render a skeleton loader while its data was loading. This PR adds the skeleton (driven by the real query loading state) and applies a set of consistency cleanups across the admin invite dialogs and the client SDK invite dialog.

Following the review discussion, the previous "disable the submit button" pattern has been replaced with schema-level validation and visible field-level error messages. The submit button no longer silently disables; instead, missing required fields and malformed emails surface inline messages through the Field component.

Changes

Add a skeleton loader to the Org select (and the Role/Email fields) in the Users-list invite dialog, gated on the real query loading state rather than a hardcoded flag.
Replace the disabled-submit pattern with strict schema validation and visible field-level error messages.
Migrate the invite dialogs' form groups to the apsara Field composite (label + error + aria-invalid), replacing the custom Label + error Text markup.
Always render the Emails Field (skeleton-swapping only the inner control) so its label no longer pops in after loading, consistent with the Role/Org fields.
Remove the now-unused invite-users-dialog-label and form-error-message CSS classes from invite-users.module.css.
Apply the same Field migration and validation approach to the org-Members "Invite user" dialog and the client SDK invite-member-dialog for consistency.

Technical Details

Replaced a hardcoded const isLoading = true (which left the dialog stuck on skeletons) with isLoading = isRolesLoading || isOrganizationsLoading.
Validation is now enforced by the form schema:
- Admin dialogs (zod): role and organizationId are required; emails is required and each address is validated.
- Client SDK (yup): type (role) is required; emails is required with a .test that validates every comma-separated address.
Errors render inline via Field; the submit button is no longer gated on form values. disabled is retained only while the roles/orgs queries are loading (when the fields are skeletons), so it never blocks a completed form.
The Members dialog intentionally has no skeleton — its roles are provided synchronously by OrganizationContext, so there is no loading state to gate on.
The shared invite-users-dialog-label and form-error-message CSS classes are retained in the Members dialog's stylesheet because add-tokens-dialog.tsx still uses them.

Test Plan

Manual testing completed
Build and type checking passes

SQL Safety (if your PR touches `_repository.go` or `goqu.`)

N/A

vercel · 2026-07-03T10:19:31Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Jul 7, 2026 7:14am

coderabbitai · 2026-07-03T10:19:56Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 50d1e79c-bdc0-472f-9571-b908572dec29

📥 Commits

Reviewing files that changed from the base of the PR and between a545dd0 and 9196cca.

📒 Files selected for processing (1)

web/sdk/admin/views/users/list/invite-users.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

web/sdk/admin/views/users/list/invite-users.tsx

📝 Walkthrough

Summary by CodeRabbit

Bug Fixes
- Strengthened invite validation for required fields (including role and organization) and improved comma-separated email handling to accept only trimmed, non-empty, properly formatted email lists.
- Reduced invalid/early submissions by extending submit disabling based on loading and validation state.
UI Improvements
- Standardized invite dialog form layout and error display with consistent field components.
- Added skeleton placeholders for loading states across email/role and organization selectors for smoother feedback.

Walkthrough

Two invite-user forms and one client invite dialog now use Field-based rendering with stricter email validation and required-field checks. The users list form also adds shared loading-state handling with Skeleton, and unused CSS rules were removed.

Changes

Invite users form UX refactor

Layer / File(s)	Summary
Organization invite dialog validation and fields `web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx`	Tightens `emails` and `role` validation, replaces manual label/error layout with `Field` wrappers, and derives submit gating from current form state.
Users list validation and loading state `web/sdk/admin/views/users/list/invite-users.tsx`	Tightens schema validation, introduces a combined loading flag, and updates imports to use apsara `Field` and `Skeleton`.
Users list field rendering and submit state `web/sdk/admin/views/users/list/invite-users.tsx`, `web/sdk/admin/views/users/list/invite-users.module.css`	Refactors email, role, and organization controls into `Field` wrappers with skeleton gating, disables submit while loading, and removes unused label/error CSS rules.
Client invite dialog schema and field refactor `web/sdk/client/views/members/components/invite-member-dialog.tsx`	Tightens comma-separated email validation, removes derived disable-state watching, and refactors the email and optional team fields into `Field` wrappers with loading-aware rendering and submit disabling.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

raystack/frontier#1435: Both touch the admin invite-users email textarea in invite-users.tsx.
raystack/frontier#1452: Both touch the invite-users dialog email textarea in invite-users-dialog.tsx.
raystack/frontier#1712: Both modify the invite-users organization selector in invite-users.tsx.

Suggested reviewers: rsbh, paanSinghCoder

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx (1)

111-129: 📐 Maintainability & Code Quality | 🔵 Trivial

Duplicate email-parsing / disable logic across both invite dialogs.

This isDisabled computation (parse emails, check role, submitting, errors) is duplicated almost verbatim in web/sdk/admin/views/users/list/invite-users.tsx. Consider extracting a shared hook (e.g. useInviteFormDisabled(values, isSubmitting, errors)) to avoid divergence when validation rules change.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1b195017-2b13-4e58-a43b-dbe15e9b8041

📥 Commits

Reviewing files that changed from the base of the PR and between 854c122 and 99ce08a.

📒 Files selected for processing (3)

web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
web/sdk/admin/views/users/list/invite-users.module.css
web/sdk/admin/views/users/list/invite-users.tsx

💤 Files with no reviewable changes (1)

web/sdk/admin/views/users/list/invite-users.module.css

coveralls · 2026-07-03T10:26:17Z

Coverage Report for CI Build 28848510466

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 44.865%

Details

Coverage remained the same as the base build.
Patch coverage: No coverable lines changed in this PR.
No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

Coverage Stats


Relevant Lines:	37608
Covered Lines:	16873
Line Coverage:	44.87%
Coverage Strength:	12.49 hits per line

💛 - Coveralls

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

web/sdk/client/views/members/components/invite-member-dialog.tsx (1)
34-46: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Minor: schema re-instantiated per validation call.

yup.string().email() is created fresh on every email in the list during .test; hoisting it outside the test callback avoids redundant object construction on each keystroke/submit.
♻️ Suggested tweak
+const emailValidator = yup.string().email();
+
 const inviteSchema = yup.object({
   ...
     .test('emails', 'Enter valid email address(es)', value => {
       ...
       return (
         emailList.length > 0 &&
-        emailList.every(email => yup.string().email().isValidSync(email))
+        emailList.every(email => emailValidator.isValidSync(email))
       );
     })
 });

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3802b7be-3d7f-4f7d-9169-c71410692f5c

📥 Commits

Reviewing files that changed from the base of the PR and between 99ce08a and 21235e4.

📒 Files selected for processing (3)

web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
web/sdk/admin/views/users/list/invite-users.tsx
web/sdk/client/views/members/components/invite-member-dialog.tsx

fix(admin): add skeleton loader to invite-user Org select

99ce08a

Shreyag02 requested a review from rohanchkrabrty July 3, 2026 10:19

Shreyag02 requested a review from rohilsurana July 3, 2026 10:19

coderabbitai Bot reviewed Jul 3, 2026

View reviewed changes

Comment thread web/sdk/admin/views/users/list/invite-users.tsx Outdated

rohanchkrabrty requested changes Jul 6, 2026

View reviewed changes

Comment thread web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx Outdated

Comment thread web/sdk/admin/views/users/list/invite-users.tsx Outdated

Comment thread web/sdk/admin/views/users/list/invite-users.tsx

fix(invite): replace disabled submit with visible field validation

21235e4

Shreyag02 requested a review from rohanchkrabrty July 6, 2026 13:14

vercel Bot deployed to Preview July 6, 2026 13:14 View deployment

coderabbitai Bot reviewed Jul 6, 2026

View reviewed changes

Comment thread web/sdk/admin/views/users/list/invite-users.tsx

Comment thread web/sdk/client/views/members/components/invite-member-dialog.tsx

resolving comments

a545dd0

vercel Bot deployed to Preview July 7, 2026 06:32 View deployment

rohanchkrabrty requested changes Jul 7, 2026

View reviewed changes

Comment thread web/sdk/admin/views/users/list/invite-users.tsx Outdated

updated orgniztion with terminology

9196cca

vercel Bot deployed to Preview July 7, 2026 07:14 View deployment

rohanchkrabrty approved these changes Jul 7, 2026

View reviewed changes

Shreyag02 merged commit 7d10e3e into main Jul 7, 2026
8 checks passed

Shreyag02 deleted the fix/invite-user-org-select-missing-skeleton branch July 7, 2026 07:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(admin): add skeleton loader to invite-user Org select#1735

fix(admin): add skeleton loader to invite-user Org select#1735
Shreyag02 merged 4 commits into
mainfrom
fix/invite-user-org-select-missing-skeleton

Shreyag02 commented Jul 3, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 3, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coveralls commented Jul 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Shreyag02 commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Technical Details

Test Plan

SQL Safety (if your PR touches *_repository.go or goqu.*)

Uh oh!

vercel Bot commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coveralls commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for CI Build 28848510466

Coverage remained the same at 44.865%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Shreyag02 commented Jul 3, 2026 •

edited

Loading

SQL Safety (if your PR touches `_repository.go` or `goqu.`)

vercel Bot commented Jul 3, 2026 •

edited

Loading

coderabbitai Bot commented Jul 3, 2026 •

edited

Loading

coveralls commented Jul 3, 2026 •

edited

Loading