Use svelte #await block in data fetching example

content/7-webapp-features/2-fetch-data/svelte4/App.svelte

@@ -1,23 +1,25 @@
 <script>
-  import useFetchUsers from "./useFetchUsers";
-
-  const { isLoading, error, data: users } = useFetchUsers();
+  async function fetchUsers() {
+    const response = await fetch("https://randomuser.me/api/?results=3");
+    const { results: users } = await response.json();
+    return users;
+  }
 </script>
 
-{#if $isLoading}
+{#await fetchUsers()}
   <p>Fetching users...</p>
-{:else if $error}
-  <p>An error occurred while fetching users</p>
-{:else if $users}
+{:then users}
   <ul>
-    {#each $users as user}
+    {#each users as { picture, name }}
       <li>
-        <img src={user.picture.thumbnail} alt="user" />
+        <img src={picture.thumbnail} alt="user" />
         <p>
-          {user.name.first}
-          {user.name.last}
+          {name.first}
+          {name.last}
         </p>
       </li>
     {/each}
   </ul>
-{/if}
+{:catch}
+  <p>An error occurred while fetching users</p>
+{/await}

content/7-webapp-features/2-fetch-data/svelte5/App.svelte

@@ -1,23 +1,25 @@
 <script>
-  import useFetchUsers from "./useFetchUsers.svelte.js";
-
-  const response = useFetchUsers();
+  async function fetchUsers() {
+    const response = await fetch("https://randomuser.me/api/?results=3");
+    const { results: users } = await response.json();
+    return users;
+  }
 </script>
 
-{#if response.isLoading}
+{#await fetchUsers()}
   <p>Fetching users...</p>
-{:else if response.error}
-  <p>An error occurred while fetching users</p>
-{:else if response.users}
+{:then users}
   <ul>
-    {#each response.users as user}
+    {#each users as { picture, name }}
       <li>
-        <img src={user.picture.thumbnail} alt="user" />
+        <img src={picture.thumbnail} alt="user" />
         <p>
-          {user.name.first}
-          {user.name.last}
+          {name.first}
+          {name.last}
         </p>
       </li>
     {/each}
   </ul>
-{/if}
+{:catch}
+  <p>An error occurred while fetching users</p>
+{/await}