[ui] image loading spinner
parent
c6ad259851
commit
7134a7db52
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { useEntity } from "../../lib/entity";
|
import { useEntity } from "../../lib/entity";
|
||||||
|
import Spinner from "../utils/Spinner.svelte";
|
||||||
import ModelViewer from "./blobs/ModelViewer.svelte";
|
import ModelViewer from "./blobs/ModelViewer.svelte";
|
||||||
import TextViewer from "./blobs/TextViewer.svelte";
|
import TextViewer from "./blobs/TextViewer.svelte";
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
@ -12,6 +13,8 @@
|
||||||
["audio", "video", "image", "model", "text"].some((prefix) =>
|
["audio", "video", "image", "model", "text"].some((prefix) =>
|
||||||
mimeType.startsWith(prefix)
|
mimeType.startsWith(prefix)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
let imageLoaded = null;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if handled}
|
{#if handled}
|
||||||
|
@ -35,7 +38,14 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if mimeType?.startsWith("image")}
|
{#if mimeType?.startsWith("image")}
|
||||||
<a target="_blank" href="/api/raw/{address}">
|
<a target="_blank" href="/api/raw/{address}">
|
||||||
<img src="/api/thumb/{address}" alt={address} />
|
{#if imageLoaded != address}
|
||||||
|
<Spinner />
|
||||||
|
{/if}
|
||||||
|
<img
|
||||||
|
src="/api/thumb/{address}"
|
||||||
|
alt={address}
|
||||||
|
on:load={() => (imageLoaded = address)}
|
||||||
|
/>
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
{#if mimeType?.startsWith("model")}
|
{#if mimeType?.startsWith("model")}
|
||||||
|
|
Loading…
Reference in New Issue