use svelte promise in template

ui/src/App.svelte

@@ -6,6 +6,7 @@
   import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
   import "@shoelace-style/shoelace/dist/components/input/input.js";
   import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
+  import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
   import Browse from "./views/Browse.svelte";
 
   setBasePath("/vendor/shoelace");

ui/src/views/Home.svelte

@@ -5,15 +5,15 @@
   import type { IFile, VaultInfo } from "upend/types";
 
   let infoData: VaultInfo | undefined;
-  let latestFiles: IFile[] = [];
 
   fetch("/api/info").then(async (response) => {
     infoData = await response.json();
   });
 
-  fetch("/api/files/latest").then(async (response) => {
-    latestFiles = await response.json();
-  });
+  const latestFiles = (async () => {
+    const response = await fetch("/api/files/latest");
+    return (await response.json()) as IFile[];
+  })();
 
   function fmtDate(dateString: string) {
     const date = parseISO(dateString);
@@ -25,12 +25,14 @@
   <h1>
     {infoData?.name || "UpEnd"}
   </h1>
-  
-  {#if latestFiles}
-    <section class="latest">
-      <h2>Most recently added files</h2>
+
+  <section class="latest">
+    <h2>Most recently added files</h2>
+    {#await latestFiles}
+      <sl-spinner style="font-size: 3rem; --track-width: 6px" />
+    {:then data}
       <table>
-        {#each latestFiles as file}
+        {#each data as file}
           <tr>
             <td class="file-added">{fmtDate(file.added)}</td>
             <td>
@@ -41,8 +43,8 @@
           </tr>
         {/each}
       </table>
-    </section>
-  {/if}
+    {/await}
+  </section>
 </div>
 
 <style lang="scss">
@@ -53,7 +55,7 @@
 
   .latest {
     table {
-      border-spacing: 1em .25em;
+      border-spacing: 1em 0.25em;
     }
 
     .file-added {
@@ -61,4 +63,10 @@
       white-space: nowrap;
     }
   }
+
+  sl-spinner {
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 </style>