chore(clerk-js,ui): Add infinite loading to organization selection in OAuthConsent#8309
chore(clerk-js,ui): Add infinite loading to organization selection in OAuthConsent#8309wobsoriano merged 13 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: ca85029 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add `OrgSelect` component with infinite scroll support using `useInView` + `InfiniteListSpinner` - Pre-select the active org in the org picker dropdown - Refactor `SelectOptionList` to accept a generic `footer` slot instead of `hasMore`/`onLoadMore` props, keeping pagination concerns out of the shared primitive - Gate all org selection UI behind `ctx.enableOrgSelection` so the accounts portal path is unaffected - Include synthetic org data for manual testing until a real 10+ org account is available
wobsoriano
force-pushed
the
rob/org-select-infinite
branch
from
7fa19df to
d04f79e
Compare
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughOrg selection gained infinite-scroll support: OrgSelect now accepts optional Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/components/OAuthConsent/OAuthConsent.tsx (1)
37-40:⚠️ Potential issue | 🔴 CriticalRemove synthetic org data from runtime org-selection flow.
Line 49 through Line 62 fabricates organizations and Line 251 through Line 252 wires load-more to
syntheticFetchNextinstead of the real memberships paginator. With org selection enabled, users can select synthetic IDs and submit invalidorganization_idvalues, while real multi-page memberships are never fetched. This is a merge blocker.Proposed fix
- // TEMP: Synthetic orgs for manual infinite-scroll testing. - // Remove in follow-up once testing with a real account that has 10+ orgs. - const [syntheticPage, setSyntheticPage] = useState(1); - const syntheticOrgs: OrgOption[] = ctx.enableOrgSelection - ? Array.from({ length: syntheticPage * 5 }, (_, i) => ({ - value: `synthetic_org_${i + 1}`, - label: `Synthetic Org ${i + 1}`, - logoUrl: orgOptions[0]?.logoUrl ?? '', - })) - : []; - const mergedOrgOptions = ctx.enableOrgSelection ? [...orgOptions, ...syntheticOrgs] : orgOptions; - const syntheticHasMore = ctx.enableOrgSelection && syntheticPage < 4; // 4 pages x 5 = 20 total - const syntheticFetchNext = () => setSyntheticPage(p => p + 1); - // TEMP END + const mergedOrgOptions = orgOptions; + const hasMoreMemberships = Boolean(ctx.enableOrgSelection && userMemberships.hasNextPage); + const loadMoreMemberships = () => { + if (!ctx.enableOrgSelection || userMemberships.isLoading || !userMemberships.hasNextPage) { + return; + } + void userMemberships.fetchNext?.(); + }; @@ - hasMore={syntheticHasMore} - onLoadMore={syntheticFetchNext} + hasMore={hasMoreMemberships} + onLoadMore={loadMoreMemberships}Also applies to: 49-62, 251-252
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx` around lines 37 - 40, The component is inserting synthetic organizations and wiring the load-more button to syntheticFetchNext which allows selecting invalid organization_id values; remove the synthetic org fabrication and instead use the real paginator returned by useOrganizationList (the userMemberships result) and its fetchNext/fetchMore method when ctx.enableOrgSelection is true; update the load-more handler (replace syntheticFetchNext) to call the paginator from useOrganizationList and ensure the selected organization IDs come from userMemberships items so only real IDs are submitted.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@packages/ui/src/components/OAuthConsent/OAuthConsent.tsx`:
- Around line 37-40: The component is inserting synthetic organizations and
wiring the load-more button to syntheticFetchNext which allows selecting invalid
organization_id values; remove the synthetic org fabrication and instead use the
real paginator returned by useOrganizationList (the userMemberships result) and
its fetchNext/fetchMore method when ctx.enableOrgSelection is true; update the
load-more handler (replace syntheticFetchNext) to call the paginator from
useOrganizationList and ensure the selected organization IDs come from
userMemberships items so only real IDs are submitted.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 3d37727e-4008-43ba-891a-0a9ceff80768
📒 Files selected for processing (5)
packages/clerk-js/sandbox/app.tspackages/ui/src/components/OAuthConsent/OAuthConsent.tsxpackages/ui/src/components/OAuthConsent/OrgSelect.tsxpackages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsxpackages/ui/src/elements/Select.tsx
| ); | ||
| })} | ||
| {noResultsMessage && options.length === 0 && <SelectNoResults>{noResultsMessage}</SelectNoResults>} | ||
| {footer} |
There was a problem hiding this comment.
There's probably a better way there but simplest is just adding an element here to keep pagination concerns out of the shared primitive. The OrgSelect component owns the scroll detection logic and passes the spinner in as a footer when there are more pages to load
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
| if (onReachEnd && focusedIndex === options.length - 1) { | ||
| onReachEnd(); | ||
| return; | ||
| } |
There was a problem hiding this comment.
should not break existing components interactions like the phone number input. Only invokes the method if it exists
2 participants
Description
Adds infinite loading to the organization selector inside OAuthConsent component.
Screen.Recording.2026-04-15.at.4.34.39.PM.mov
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change