feat(elements): <Loading> component - #3002
Conversation
🦋 Changeset detectedLatest commit: e6ca9f5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
| "scripts": { | ||
| "build": "next build", | ||
| "dev": "next dev", | ||
| "dev:debug": "NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true next dev", |
brkalow
left a comment
brkalow
left a comment
There was a problem hiding this comment.
left a few non-blocking comments, but lgtm! Nice work
|
|
||
| Provider.displayName = displayName; | ||
|
|
||
| function useContext(allowMissingContext: boolean = false) { |
There was a problem hiding this comment.
We're not currently using this helper to enforce the context existing 🤔 Do you think we'll have a use for it in the future?
There was a problem hiding this comment.
The helper is very much a copy of https://github.com/clerk/javascript/blob/f984829a70fbeae0d6faef58248ddd368a771cce/packages/elements/src/react/utils/create-context-from-actor-ref.ts so that's why it's here. I think we can keep it and then at least have a fallback error if we don't handle it ourselves
| * </Loading> | ||
| * </Step> | ||
| */ | ||
| export function Loading({ children, scope }: LoadingProps) { |
There was a problem hiding this comment.
💭 I wonder if we could expose Loading from common and use a common loading context rendered within each flow. No action needed for now, just a thought! It would likely complicate some of the scope logic by trying to make it generic.
| throw new Error( | ||
| `You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}.Provider> component.`, | ||
| ); |
There was a problem hiding this comment.
❓ Do we have a heuristic for when we throw a ClerkElementsRuntimeError vs just Error? 🤔
There was a problem hiding this comment.
I think at this point it's a bit random, but we can tackle it as part of SDK-1315
3 participants
Description
Adds a
<Loading>component. Access the loading state of a chosen scope. Scope can refer to a step, a provider, or the global loading state. The global loading state istruewhen any of the other scopes are loading.Example:
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change