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,6 +65,8 @@
         let html = editor.getHtml(true);
         let fd = new FormData(form);
         fd.append('html', html);
+        loading = true;
+        try {
             const res = await fetch(`/cms/article`, {
                 method: 'POST',
                 headers: {
@@ -77,6 +80,11 @@
             } else {
                 alert(`Error ${res.status}: ${json.message}`);
             }
+        } catch (err) {
+            console.error(err);
+        } finally {
+            loading = false;
+        }
     }
 
     async function addCategory()
@@ -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,11 +15,14 @@
     import { goto, stores } from '@sapper/app';
     const { session } = stores();
 
+    let loading = false;
     let uploadForm;
 
     async function upload()
     {
         let fd = new FormData(uploadForm);
+        loading = true;
+        try {
             const res = await fetch(`/me/avatar`, {
                 method: 'POST',
                 headers: {
@@ -33,6 +36,11 @@
             } else {
                 alert(`Error ${res.status}: ${json.message}`);
             }
+        } catch (err) {
+            console.error(err);
+        } finally {
+            loading = false;
+        }
     }
 
     async function del()
@@ -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>