fix(admin): fix Org Security loading state UI

[Shreyag02]

Summary

The Org → Security page had a buggy loading state — the "Allowed email domains" loader showed up as an unstyled empty box, and the whole section would vanish or behave oddly depending on the data. This PR fixes the loader and makes the loading, empty, and error states consistent and clear.

Changes

• Switched the domains loader from react-loading-skeleton to Apsara's Skeleton (self-styled, no extra CSS needed).
• Loading, list, empty, and error states now all render inside the same bordered box, so nothing pops in or collapses.
• Added a friendly empty state ("No allowed email domains added yet") instead of rendering nothing.
• Added a distinct error state with a Retry button, so a failed fetch is no longer mistaken for an org with no domains.

Technical Details

• The root cause: the default react-loading-skeleton Skeleton relies on react-loading-skeleton/dist/skeleton.css, which is never imported anywhere in web/sdk/admin or web/apps/admin. The app's <SkeletonTheme> only provides color variables, not the base skeleton styles — so the skeleton rendered as an invisible/empty box. Apsara's Skeleton ships its own styles, so it works out of the box (same approach as session-skeleton.tsx and apis/details-dialog.tsx).
• Previously the component had three branches (skeleton / rows / null). The null empty case made the bordered box disappear, causing the "abrupt close" jump. All four states (loading/list/empty/error) now share the same .domains-list container for a stable layout.
• The error state gets error + onRetry from the listOrganizationDomains query in index.tsx; Retry calls the query's refetch(). The existing error toast is kept.

Test Plan

• Manual testing completed
  • Loaded the Org → Security page and confirmed the domains loader shows a proper skeleton, then swaps into the list without any layout jump.
  • Verified an org with no domains shows the empty-state text instead of a blank/collapsing box.
  • Simulated an API failure (blocked the ListOrganizationDomains request in DevTools) and confirmed the error state + Retry button appear; Retry re-fetches and recovers.
• Build and type checking passes (tsc --noEmit clean for the changed files)

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

N/A

[coderabbitai]

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: f68e9a31-70c5-4f08-a91c-9d658ce9c803

📥 Commits

Reviewing files that changed from the base of the PR and between 6cbca8b and 747bcb7.

📒 Files selected for processing (3)

• web/sdk/admin/views/organizations/details/security/domains-list.tsx
• web/sdk/admin/views/organizations/details/security/index.tsx
• web/sdk/admin/views/organizations/details/security/security.module.css

✅ Files skipped from review due to trivial changes (1)

• web/sdk/admin/views/organizations/details/security/security.module.css

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

• web/sdk/admin/views/organizations/details/security/index.tsx
• web/sdk/admin/views/organizations/details/security/domains-list.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added a “Retry” flow for organization email domain loading when a fetch error occurs.
  • Shows a clear empty state when no allowed email domains have been added yet.

• Bug Fixes

  • Improved failure handling by rendering an inline error message instead of leaving the domains section blank.

• Style

  • Refreshed the loading placeholders for a cleaner, more consistent layout, and added dedicated styling for the domains list status/empty states.

Walkthrough

DomainsList now renders loading, error, retry, empty, and populated states. OrganizationSecurity passes query errors and a refetch callback into the component, with new CSS styles for status and empty-state layouts.

Changes

Domains list retry UI

Layer / File(s)	Summary
DomainsList error, empty state, and skeleton rendering web/sdk/admin/views/organizations/details/security/domains-list.tsx, web/sdk/admin/views/organizations/details/security/security.module.css	Adds error and retry handling, fixed loading skeletons, an explicit empty-state message, the Apsara Skeleton import, and styles for status and empty states.
OrganizationSecurity refetch wiring web/sdk/admin/views/organizations/details/security/index.tsx	Destructures refetch from useQuery and passes the query error and retry callback to DomainsList.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: rohilsurana, rohanchkrabrty

🚥 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/sdk/admin/views/organizations/details/security/domains-list.tsx (1)

157-165: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

Retry button has no in-flight/disabled state.

Clicking Retry triggers onRetry() (parent's refetch()), but there's no indication that a refetch is in progress and nothing prevents multiple rapid clicks from firing duplicate requests while the previous one is still pending.

Consider threading an isFetching/isRetrying flag down to disable the button (and optionally show a loading label) while a refetch is outstanding.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1335a2e4-b2b2-4faf-8b48-5ba5442cb8d4

📥 Commits

Reviewing files that changed from the base of the PR and between 961da8a and 6cbca8b.

📒 Files selected for processing (2)

• web/sdk/admin/views/organizations/details/security/domains-list.tsx
• web/sdk/admin/views/organizations/details/security/index.tsx

[coveralls]

Coverage Report for CI Build 29076302264

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 decreased (-0.003%) to 44.876%

Details

• Coverage decreased (-0.003%) from the base build.
• Patch coverage: No coverable lines changed in this PR.
• 219 coverage regressions across 7 files.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

219 previously-covered lines in 7 files lost coverage.

File	Lines Losing Coverage	Coverage
core/invitation/service.go	66	50.54%
cmd/serve.go	42	0.0%
internal/api/v1beta1connect/group.go	42	83.05%
internal/store/postgres/group_repository.go	32	76.03%
core/group/service.go	22	54.78%
cmd/group.go	8	43.8%
internal/store/postgres/invitation_repository.go	7	79.51%

---

Coverage Stats

Relevant Lines:	37644
Covered Lines:	16893
Line Coverage:	44.88%
Coverage Strength:	12.54 hits per line

---

💛 - Coveralls

[vercel]

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

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