High delay in using actions in +page.server.js

[AxewBoTX]

I have been learning svelte and sveltekit for the past 3 to 4 months now and last month I decided to start working on a simple todo app by using pocketbase for Authentication and database.

Everything was going fine and I was using +page.server.js files to load data from pocketbase and do various actions using forms, there is a little lag between making a request to the pocketbase and getting the data from pocketbase which is not that much of an issue, the issue is when that lags turns into a few seconds on the browser.

Right now I am trying to make a register and login page for my app. Whenever I do something on my app like click the login button then the page stays stuck for a while and then the actions actually shows on the page.
Generally the time lag between sending data to pocketbase using actions in +page.server.js and recieving data from it is pretty fast like 4 seconds max but it still feels like a lot when the page is stuck.

My +page.server.js file looks like this right now:-

export const actions = {
  //Login Action
  login: async (event) => {
    const formData = Object.fromEntries(await event.request.formData());
    let user;
    //Validating Form Data
    try {
      user = loginSchema.parse(formData);
    } catch (err) {
      const { fieldErrors: errors } = err.flatten();
      const { email } = formData;
      return {
        email,
        errors,
      };
    }
    //Actual Login
    try {
      await event.locals.pb
        .collection("users")
        .authWithPassword(user.email, user.password);
    } catch (authError) {
      throw error(authError.status, authError.message);
    }
  },
};

RIght now the when this actions runs the page stays stuck for a while and then updates.

All I want to do is to be able to show some kind of loading while the actions runs and when the action completes, then I want to show the data that is fetched or updated.

Is there any way to do something about this? I have been playing with form enhancing for a while and I think I can use it to solve my problem but I still dont have any idea about what to do or whether It is possible or not.

Please consider helping.
Thanks! ^_^

[eltigerchino]

You can customise the use:enhance action to display some loading UI.

See https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance

<script>
  import { enhance } from '$app/forms';

  let loading = false;
</script>

<form
	method="POST"
	use:enhance={({ formElement, formData, action, cancel, submitter }) => {
		// `formElement` is this `<form>` element
		// `formData` is its `FormData` object that's about to be submitted
		// `action` is the URL to which the form is posted
		// calling `cancel()` will prevent the submission
		// `submitter` is the `HTMLElement` that caused the form to be submitted
		
		// toggle a boolean to show some loading UI
		loading = true;

        // this callback runs when the form action is complete
		return async ({ result, update }) => {
			// `result` is an `ActionResult` object
			// `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
			
	 		loading = false;
			
			if (result.type === 'success') {
			  // show some data?
            }
			
			await update();
		};
	}}
>

{#if loading}
  <!-- display loading spinner -->
{/if}

</form>

[DePasqualeOrg]

What if the data for the page is coming from a load function? I'm doing something like the above, and awaiting a streamed promise from the page's load function. When the form action completes, it invalidates the page data, and the new data is fetched from the load function, which triggers a loading indicator on the page. Ideally the page data would be updated when the form action completes, but I'm not sure what the best way to handle this is when streaming data from the load function.