Custom use:enhance

[00:00:00]
>> So with use:enhance, we can go further than just emulating the browser's native behavior. We can provide a callback to the action, which adds things like pending states and optimistic UI. So to be able to see this we're gonna add an artificial delay to our two actions. Open up your page.server.js file, and in the create action, we'll do await new Promise, and we'll set timeout on that fulfil callback.

[00:00:32]
We'll give it a delay of 1000 milliseconds. I'm gonna copy that and add the same thing in the Delete action. All right, and so now if we, Buy some milk, I don't know. We'll see that nothing happens for a second, and then the todo is added to the list.

[00:00:55]
Obviously not a very satisfying experience if the user has to wait a whole second before they see their updates take effect, so let's add some local state so we can add some optimistic UI. Up in our script tag, on the page.svelte file, we're gonna create a creating variable that's initialized to false.

[00:01:18]
And we'll have an array of the todos that are currently being deleted. We'll go to the first form where we add a todo, and I'm just gonna restructure this a little bit so that the code becomes easier to read. Put all of the attributes on separate lines. We're gonna provide a callback to use:enhance.

[00:01:51]
First thing we're gonna do is set creating to true, And then we're gonna return an asynchronous function, That takes this update utility. We're gonna call that, and all that's gonna do is whatever would have happened had we not provided a callback. Once the update is complete, we'll set creating back to false.

[00:02:22]
And then we're gonna disable the input while the todo is being created. Just add that disabled attribute when creating is true. And we can now show a message while we're saving data. Underneath the list of todos, we're gonna add an if block. If creating is true, Then we'll add a span there with a class of saving.

[00:02:58]
And we'll just say saving..., close the span. And then now if you had another todo, We get some user interface that tells the user that their action has been acknowledged and that we're just waiting for something to happen. In the case of deletions, we don't really need to wait for the server to validate anything, we can just update the user interface immediately.

[00:03:31]
So inside the each block, where we're iterating over the list of todos, the first thing we're gonna do is filter the list. Instead of just showing all of the todos, we're gonna show all of the todos that are not marked for deletion. And we can do that by adding this line inside the each block.

[00:03:54]
Each data.todos.filter, And then the callback is gonna be that the deleting array does not include the ID of the current todo. All right, right now that's having no effect because none of our todos are currently being deleted. But we can change that by again adding a callback to the use:enhance section.

[00:04:24]
Split the attributes onto multiple lines to make it easier to read. And the first thing we'll do is update the deleting array, To include the todo that's been deleted. And then we'll return the completion handler. That again is gonna cause the update function, That applies the changes that were gonna happen anyway, and then removes that id from the deleted array.

[00:05:24]
Okay, that was a lot of code, hopefully we typed it correctly. So now, even though it's gonna take a second for the action to actually take place, I can delete these todos in quick succession. And I forgot to add the CSS on this exercise so just pretend that you can see the trash can icon on the right-hand side of the todo.

[00:05:47]
As we click these, the todos get deleted, even though we're waiting for the server to actually apply the action. So use:enhance is very customizable. You can cancel submissions, you can handle redirects, you can control whether the form is reset, all of that. You can see the reference documentation for the details on how to do that.