Skip to content

refactor: update Base infrastructure for hooks compatibility#1300

Merged
serikjensen merged 3 commits intomainfrom
SDK-508
Mar 20, 2026
Merged

refactor: update Base infrastructure for hooks compatibility#1300
serikjensen merged 3 commits intomainfrom
SDK-508

Conversation

@serikjensen
Copy link
Copy Markdown
Member

@serikjensen serikjensen commented Mar 19, 2026

Summary

Refactors BaseBoundaries and BaseLayout to support hook-based usage without requiring Suspense, as described in the hooks RFC (PR #1254).

  • BaseBoundaries no longer wraps children in SuspenseSuspense is added back at each existing component call site so current SDK components are unaffected
  • BaseLayout accepts an isLoading prop for hook-based components to render a loading state without Suspense
  • BaseLayout accepts SDKError | SDKError[] | null for the error prop (backwards compatible) — multiple errors render a top-level "multiple problems" message with a bulleted list of each error, field errors nested as sub-lists
  • BaseLayout and BaseLayoutProps are now exported from @/components/Base

Changes

  • Base.tsx: Remove Suspense from BaseBoundaries; add it directly in BaseComponent. Refactor BaseLayout into SingleErrorContent and MultipleErrorsContent sub-components. Add isLoading prop.
  • index.ts: Export BaseLayout, BaseLayoutProps, BaseBoundariesProps
  • ConfirmWireDetails.tsx: Add Suspense wrapper inside BaseBoundaries
  • InformationRequests.tsx: Add Suspense wrapper inside BaseBoundaries
  • PayrollConfigurationProvider.tsx: Accept LoaderComponent directly, add Suspense wrapper inside BaseBoundaries
  • common.json: Add status.multipleErrorsEncountered translation key

Test plan

  • tsc --noEmit passes (verified locally)
  • Existing component behavior is unchanged (Suspense added back at all call sites)
  • BaseLayout with a single SDKError renders identically to before
  • BaseLayout with an array of SDKError[] renders top-level message + bulleted error list with nested field errors
  • BaseLayout isLoading renders the loading indicator
Screenshot 2026-03-20 at 10 18 32 AM

Made with Cursor

Remove Suspense from BaseBoundaries and add it back at each component
call site, so hook-based components can opt out of Suspense-based data
fetching. Add isLoading prop to BaseLayout for simple loading state
without Suspense. Update BaseLayout to accept an array of SDKErrors
with a multiple-errors rendering path (top-level message + bulleted
list with nested field errors per error).

Made-with: Cursor
Rename fe -> fieldError and err -> error for readability.
Regenerate i18n types for multipleErrorsEncountered key.

Made-with: Cursor
@serikjensen serikjensen enabled auto-merge (squash) March 20, 2026 16:24
@serikjensen serikjensen merged commit 57bcfbf into main Mar 20, 2026
17 checks passed
@serikjensen serikjensen deleted the SDK-508 branch March 20, 2026 16:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants