Loading UI and Progressive enhancement #7041
-
|
I have trouble understanding how to correctly do loading UI with Progressive enhancement forms. One way I thought is like so But that is a lot of code. I believe there should be a nicer way to see if a form is submitting data. Maybe there is already a better way that I am just not aware. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
You can create your own enhance method (i copied the code from sveltekits enhance method): import { applyAction, enhance } from '$app/forms';
import { invalidateAll } from '$app/navigation';
import { writable } from 'svelte/store';
const { set, subscribe } = writable(false);
export const formLoading = { subscribe };
export function enhanceWithLoad(form: HTMLFormElement) {
return enhance(form, () => {
set(true);
return async ({ result, action }) => {
if (result.type === 'success') {
await invalidateAll();
}
// For success/invalid results, only apply action if it belongs to the
// current page, otherwise `form` will be updated erroneously
if (
location.origin + location.pathname === action.origin + action.pathname ||
result.type === 'redirect' ||
result.type === 'error'
) {
applyAction(result);
}
set(false);
};
});
} |
Beta Was this translation helpful? Give feedback.
-
|
I use this to get a store that signals any data fetching (inspired by you): import { enhance, type SubmitFunction } from '$app/forms';
import { navigating } from '$app/stores';
import { derived, writable } from 'svelte/store';
const isSubmittingForm = writable(false);
export const loading = derived(
[navigating, isSubmittingForm],
([$navigating, $isSubmittingForm]) => $navigating !== null || $isSubmittingForm,
);
export const enhanceWithLoading = <
Success extends Record<string, unknown> | undefined = Record<string, any>,
Invalid extends Record<string, unknown> | undefined = Record<string, any>,
>(
form: HTMLFormElement,
submit?: SubmitFunction<Success, Invalid>,
) => {
return enhance<Success, Invalid>(form, (input) => {
isSubmittingForm.set(true);
const customCallback = submit?.(input);
return async (opts) => {
if (customCallback) {
customCallback(opts);
} else {
await opts.update();
}
isSubmittingForm.set(false);
};
});
}; |
Beta Was this translation helpful? Give feedback.
You can create your own enhance method (i copied the code from sveltekits enhance method):