Submission, Loading States, and Toast Notifications

isSubmitting = false;

async handleSubmit() {
    this.isSubmitting = true;
    try {
        await createRecord(recordInput);
    } finally {
        this.isSubmitting = false;
    }
}

<lightning-button label="Submit" onclick={handleSubmit} disabled={isSubmitting}></lightning-button>
<template if:true={isSubmitting}>
    <lightning-spinner alternative-text="Submitting"></lightning-spinner>
</template>

Using finally (Module 4) guarantees isSubmitting resets whether the submission succeeds or throws — without it, a failed submission would leave the button permanently disabled.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

showSuccessToast() {
    this.dispatchEvent(new ShowToastEvent({
        title: 'Success',
        message: 'Record created successfully.',
        variant: 'success',
    }));
}

showErrorToast(message) {
    this.dispatchEvent(new ShowToastEvent({
        title: 'Error creating record',
        message,
        variant: 'error',
    }));
}

ShowToastEvent is a special, framework-provided event type — dispatched like the CustomEvents from Module 5, but automatically caught and rendered as a toast notification by the Lightning Experience shell, with no listener needed on any parent component.

async handleSubmit() {
    this.isSubmitting = true;
    try {
        await createRecord(recordInput);
        this.showSuccessToast();
    } catch (error) {
        this.showErrorToast(error.body?.message ?? 'An unexpected error occurred.');
    } finally {
        this.isSubmitting = false;
    }
}

Loading state, success feedback, and error feedback, all handled in one cohesive try/catch/finally block.