diff --git a/ui/src/App.svelte b/ui/src/App.svelte index fe391b3..25f928d 100644 --- a/ui/src/App.svelte +++ b/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"); diff --git a/ui/src/views/Home.svelte b/ui/src/views/Home.svelte index 092de95..65080c0 100644 --- a/ui/src/views/Home.svelte +++ b/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 @@

{infoData?.name || "UpEnd"}

- - {#if latestFiles} -
-

Most recently added files

+ +
+

Most recently added files

+ {#await latestFiles} + + {:then data} - {#each latestFiles as file} + {#each data as file} {/each}
{fmtDate(file.added)} @@ -41,8 +43,8 @@
-
- {/if} + {/await} +