Video 7

src/routes/account/+page.svelte

@@ -3,9 +3,12 @@
 
   import Card from '$lib/components/Card.svelte';
   import { prefersReducedMotion } from '$lib/utils/preferences';
+  import { toasts } from '$lib/utils/toats';
 
   import type { PageData } from './$types';
 
+  import { enhance } from '$app/forms';
+
   export let data: PageData;
 </script>
 
@@ -51,7 +54,19 @@
   </Card>
   <Card>
     <h2 class="h2">Editer le profil</h2>
-    <form method="POST" class="form">
+    <form
+      method="POST"
+      class="form"
+      use:enhance={() => {
+        return async ({ update, result }) => {
+          await update({ reset: false });
+
+          if (result.type === 'success') {
+            toasts.success('Profil mis à jour.');
+          }
+        };
+      }}
+    >
       <div>
         <label for="username">Votre nom d'utilisateur</label>
         <input

src/routes/account/favourites/+page.svelte

@@ -9,6 +9,7 @@
 
   import type { PageData } from './$types';
 
+  import { enhance } from '$app/forms';
   import { page } from '$app/stores';
 
   export let data: PageData;
@@ -97,7 +98,11 @@
                   </p>
                 </div>
                 <div class="my-auto">
-                  <form method="post" action="/recipes/{favourite.recipe.slug}?/favourite">
+                  <form
+                    method="post"
+                    action="/recipes/{favourite.recipe.slug}?/favourite"
+                    use:enhance
+                  >
                     <button
                       type="submit"
                       class="btn | bg-red-600 mx-0 p-2.5 hover:!bg-red-700"

src/routes/login/+page.svelte

@@ -3,12 +3,14 @@
 
   import type { ActionData } from './$types';
 
+  import { enhance } from '$app/forms';
+
   export let form: ActionData;
 </script>
 
 <section class="section">
   <Card title="Se connecter">
-    <form method="POST" action="?/login" class="form">
+    <form method="POST" action="?/login" class="form" use:enhance>
       <div>
         <label for="username">Nom d'utilisateur</label>
         <input type="username" name="username" id="username" required={true} />

src/routes/recipes/[slug]/+page.svelte

@@ -12,6 +12,8 @@
 
   import type { PageData } from './$types';
 
+  import { enhance } from '$app/forms';
+
   export let data: PageData;
 
   const [send, receive] = crossfade({
@@ -26,7 +28,7 @@
 </script>
 
 <div class="flex gap-2 items-center justify-center">
-  <form method="POST" action="?/favourite" class="relative">
+  <form method="POST" action="?/favourite" class="relative" use:enhance>
     <h1 class="h1 first-letter:capitalize" style="view-transition-name: {data.recipe.slug};">
       {data.recipe.dish}
     </h1>

src/routes/register/+page.svelte

@@ -3,12 +3,14 @@
 
   import type { ActionData } from './$types';
 
+  import { enhance } from '$app/forms';
+
   export let form: ActionData;
 </script>
 
 <section class="section">
   <Card title="Créer un compte">
-    <form action="?/register" method="POST" class="form">
+    <form action="?/register" method="POST" class="form" use:enhance>
       <div>
         <label for="username">Votre nom d'utilisateur</label>
         <input type="text" name="username" id="username" required={true} />

src/routes/search/+page.svelte

@@ -3,17 +3,22 @@
   import Loader from '$lib/components/Loader.svelte';
   import Search from '$lib/components/Search.svelte';
   import ArrowRight from '$lib/svg/ArrowRight.svelte';
+  import Spinner from '$lib/svg/Spinner.svelte';
 
   import type { PageData, ActionData } from './$types';
 
+  import { enhance } from '$app/forms';
+
   export let data: PageData;
   export let form: ActionData;
+
+  let isLoading = false;
 </script>
 
 <h1 class="h1">Recherche</h1>
 
 <div class="max-w-xl mb-4 mx-auto w-full">
-  <Search value={data.query} />
+  <Search value={data.query} disabled={isLoading} />
 </div>
 
 <div class="max-w-xl mx-auto space-y-6 w-full" role="region" aria-live="polite">
@@ -24,9 +29,34 @@
       <Card>
         {#if data.query.trim() !== ''}
           <p class="text-gray-500 text-center" role="status">Aucun résulat pour "{data.query}".</p>
-          <form method="POST" action="?/generate" class="form">
+          <form
+            method="POST"
+            action="?/generate"
+            class="form"
+            use:enhance={({ cancel }) => {
+              if (isLoading) {
+                cancel();
+
+                return;
+              }
+
+              isLoading = true;
+
+              return async ({ update }) => {
+                await update();
+
+                isLoading = false;
+              };
+            }}
+          >
             <input type="hidden" name="dish" value={data.query} class="!hidden" />
-            <button type="submit" class="btn"> Générer la recette </button>
+            <button type="submit" class="btn" disabled={isLoading}>
+              {#if isLoading}
+                <Spinner />
+              {/if}
+
+              Générer la recette
+            </button>
           </form>
         {:else}
           <p class="text-gray-500 text-center" role="status">