showLoading
Whenever you use an href property, Bubbles will automatically show and hide loading states for you. However when you use onclick, onselect, onchange, etc properties, you need to tell bubbles what needs to show loading animations.
Bubbles makes loading states imperative, meaning you control when to start and stop the loading animation. This is most commonly done because you are waiting for a promise, like when submitting a form.
Every element that the user can interact with can accept an id property. Use the showLoading function and pass in the id of the element that needs to show a loading state.
When your promise resolves, use hideLoading to stop the loading state by passing in the id for the item that's loading.
Props
id string
The ID of the component you wish to stop loading
Returns
void
Does not return anything.
<script>
import { validateInputs, showToast, getFormData, showLoading, hideLoading } from "bubbles-ui";
const formInputs = [
{
type: "text",
id: "name.first", //the id that will be shown if there is an error
label: "Your First Name",
value: "Jamie",
desc: "You'll be able to change this name later",
error: "A name is required",
validation: "string|required", //the validation requirements that will be run
validate_on_blur: true,
vob: true,
},
{
type: "text",
id: "name.last", //the id that will be shown if there is an error
label: "Your Last Name",
value: "Jones",
desc: "You'll be able to change this name later",
error: "A name is required",
validation: "string|required", //the validation requirements that will be run
validate_on_blur: true,
vob: true,
},
{
type: "number",
id: "favorite_number", //the id that will be shown if there is an error
label: "Your favorite number",
value: 5,
desc: "Pick any number!",
error: "Please select a number",
validation: "numeric|required", //the validation requirements that will be run
validate_on_blur: true,
vob: true,
},
{
type: "submit",
label: "Submit Form",
onsubmit: async (event) => {
//the onsubmit and onclick function on buttons will give you the event param
//if you want to toggle the loading state on your button while doing a networking request
//just use showLoading() and pass in the id
//An id will automatically be assigned to the button for you
const button_id = event.currentTarget.id;
showLoading(button_id);
try {
//if there are any errors, calling validateInputs will automatically show error states for
//all components that have failed validation
await validateInputs(toastExampleFormInputs); //if any inputs fail validation, the promise will be rejected
const data = await getFormData(toastExampleFormInputs);
const res = await fetch("/api/your-endpoint", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include", //if using ssr
body: JSON.stringify(data),
});
const data = await res.json();
showToast("Your account was successfully updated", "success");
} catch (error) {
showToast(error.message, "error");
} finally {
hideLoading(button_id);
}
},
},
];
</script>