added loading indicators on forms

src/routes/cms/create.svelte

@@ -18,6 +18,7 @@
     const { session } = stores();
 
     let editor, form, uploadForm;
+    let loading = false;
     let title = '', category = '';
     export let categories;
 
@@ -64,18 +65,25 @@
         let html = editor.getHtml(true);
         let fd = new FormData(form);
         fd.append('html', html);
-        const res = await fetch(`/cms/article`, {
+        loading = true;
-            method: 'POST',
+        try {
-            headers: {
+            const res = await fetch(`/cms/article`, {
-                'Accept': 'application/json'
+                method: 'POST',
-            },
+                headers: {
-            body: fd
+                    'Accept': 'application/json'
-        });
+                },
-        const json = await res.json();
+                body: fd
-        if (res.status === 200) {
+            });
-            goto(`/a/${json.slug}`);
+            const json = await res.json();
-        } else {
+            if (res.status === 200) {
-            alert(`Error ${res.status}: ${json.message}`);
+                goto(`/a/${json.slug}`);
+            } else {
+                alert(`Error ${res.status}: ${json.message}`);
+            }
+        } catch (err) {
+            console.error(err);
+        } finally {
+            loading = false;
         }
     }
 
@@ -164,4 +172,7 @@
         </p>
     </form>
     <button on:click={submit}>Submit</button>
+    {#if loading}
+        <progress>Uploading...</progress>
+    {/if}
 </div>

src/routes/me/avatar.svelte

@@ -15,23 +15,31 @@
     import { goto, stores } from '@sapper/app';
     const { session } = stores();
 
+    let loading = false;
     let uploadForm;
 
     async function upload()
     {
         let fd = new FormData(uploadForm);
-        const res = await fetch(`/me/avatar`, {
+        loading = true;
-            method: 'POST',
+        try {
-            headers: {
+            const res = await fetch(`/me/avatar`, {
-                'Accept': 'application/json'
+                method: 'POST',
-            },
+                headers: {
-            body: fd
+                    'Accept': 'application/json'
-        });
+                },
-        const json = await res.json();
+                body: fd
-        if (res.status === 200) {
+            });
-            $session.user.avatar = json.filename;
+            const json = await res.json();
-        } else {
+            if (res.status === 200) {
-            alert(`Error ${res.status}: ${json.message}`);
+                $session.user.avatar = json.filename;
+            } else {
+                alert(`Error ${res.status}: ${json.message}`);
+            }
+        } catch (err) {
+            console.error(err);
+        } finally {
+            loading = false;
         }
     }
 
@@ -64,6 +72,9 @@
             Change your photo so you at least have a chance:
             <input type="file" name="upload">
             <button type="submit">Upload</button>
+            {#if loading}
+                <progress>Uploading...</progress>
+            {/if}
         </p>
     </form>
     <p>Or better yet, erase your wretched face from this site entirely: <button on:click={del}>Reset Avatar</button></p>