Skip to content

feat(vue): add loading and error slots to FormRelay component#9

Merged
RobertBoes merged 4 commits into
mainfrom
feature/loading-error-slots
Apr 3, 2026
Merged

feat(vue): add loading and error slots to FormRelay component#9
RobertBoes merged 4 commits into
mainfrom
feature/loading-error-slots

Conversation

@RobertBoes
Copy link
Copy Markdown
Contributor

Summary

  • Adds optional #loading and #error named slots to the <FormRelay> component
  • #loading renders while the schema is being fetched — prevents showing an empty form with a visible submit button
  • #error renders when the schema fetch fails, with { error } as slot props
  • Fully backwards compatible: omitting the slots preserves existing default-slot behavior (schemaLoading/schemaError still passed as props)

Usage

<FormRelay form-id="..." public-key="...">
  <template #loading>
    <p>Loading form...</p>
  </template>
  <template #error="{ error }">
    <p>Failed to load form: {{ error.detail }}</p>
  </template>
  <template #default="{ fields, submit, canSubmit }">
    <!-- form fields + submit button -->
  </template>
</FormRelay>

Test plan

  • Renders loading slot while schema is fetching
  • Switches to default slot after schema loads
  • Falls through to default slot (with schemaLoading: true) when no loading slot provided
  • Renders error slot when schema fetch fails
  • Falls through to default slot (with schemaError) when no error slot provided
  • All existing tests continue to pass

Add optional #loading and #error named slots so consumers can show
placeholder content while the schema fetches and handle fetch failures
without manual v-if checks on schemaLoading/schemaError.

Fully backwards compatible — omitting the slots preserves existing
default-slot-only behavior.
Use fixed versioning so all @formrelay/* packages stay at the same
version without needing to list unchanged packages in changesets.
Also remove core from the changeset since fixed handles it automatically.
Ensure error slot takes priority over loading slot if both states are
truthy simultaneously. Also adds tests for loading-to-error transition,
FormRelayError pass-through, and no-slots rendering.
@RobertBoes RobertBoes merged commit dce4e88 into main Apr 3, 2026
1 check failed
@RobertBoes RobertBoes deleted the feature/loading-error-slots branch April 3, 2026 08:06
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.

1 participant