mirror of
https://github.com/Damillora/Shioriko.git
synced 2025-02-23 17:33:39 +00:00
feat: add loading states
This commit is contained in:
parent
413579e08d
commit
7bb7a3389b
@ -3,6 +3,7 @@
|
||||
|
||||
let { alt, src } = $props();
|
||||
let loading = $state(false);
|
||||
let failed = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
const img = new Image();
|
||||
@ -11,13 +12,22 @@
|
||||
|
||||
img.onload = () => {
|
||||
loading = false;
|
||||
failed = false;
|
||||
};
|
||||
img.onerror = () => {
|
||||
loading = true;
|
||||
failed = true;
|
||||
};
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if !failed}
|
||||
|
||||
<figure class:is-skeleton="{loading}">
|
||||
<img {src} {alt} />
|
||||
</figure>
|
||||
{:else}
|
||||
<div class="notification is-danger is-light">
|
||||
There was an error loading this image.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
</script>
|
||||
|
||||
<a href="/posts?tags={tagName}">
|
||||
{tagDisplay}
|
||||
<span>
|
||||
{tagDisplay}
|
||||
</span>
|
||||
<TagTypeIndicator tagType={tagType}></TagTypeIndicator>
|
||||
<span class="is-pulled-right">{num}</span>
|
||||
</a>
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
post = data;
|
||||
imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
|
||||
};
|
||||
let loading = $state(false);
|
||||
let isOriginal = $state(false);
|
||||
|
||||
const trimUrl = (str: string) => {
|
||||
@ -53,11 +54,11 @@
|
||||
let imagePercentage = $state("0%");
|
||||
</script>
|
||||
|
||||
{#if post}
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{#if post}
|
||||
{#if editMenuShown == false && deleteMenuShown == false}
|
||||
<ViewPostPanel
|
||||
{post}
|
||||
@ -88,8 +89,14 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="column box">
|
||||
{:else}
|
||||
<div class="skeleton-block">
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="column box">
|
||||
{#if post}
|
||||
{#if post.width > 1000 && isOriginal == false}
|
||||
<div class="notification is-info">
|
||||
Resized to {imagePercentage} of the original image.
|
||||
@ -101,15 +108,19 @@
|
||||
<ShiorikoImage alt={post.id} src={post.preview_path} />
|
||||
</figure>
|
||||
{:else}
|
||||
<div class="notification is-primary">
|
||||
Currently viewing original image.
|
||||
</div>
|
||||
<div class="notification is-primary">
|
||||
Currently viewing original image.
|
||||
</div>
|
||||
<figure class="image">
|
||||
<ShiorikoImage alt={post.id} src={post.image_path} />
|
||||
</figure>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="skeleton-block">
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -23,6 +23,7 @@
|
||||
let tags = $state([]);
|
||||
let tagInfo = $state(null);
|
||||
let categorizedTags = {};
|
||||
let loading = $state(false);
|
||||
|
||||
const getData = async () => {
|
||||
const data = await getPosts({ page, q: searchTerms.join("+") });
|
||||
@ -49,6 +50,7 @@
|
||||
if (searchTerms.filter((x) => !x.startsWith("-")).length == 1) {
|
||||
tagInfo = await getTag({ tag: searchTerms[0] });
|
||||
}
|
||||
loading = false;
|
||||
};
|
||||
let tagQuery = $state();
|
||||
|
||||
@ -62,6 +64,7 @@
|
||||
};
|
||||
|
||||
afterNavigate(() => {
|
||||
loading = true;
|
||||
tagQuery = url.searchParams.get("tags");
|
||||
if (tagQuery) {
|
||||
searchTerms = tagQuery.split(" ");
|
||||
@ -99,7 +102,7 @@
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<div class="panel is-primary">
|
||||
<div class="panel-heading">Tags</div>
|
||||
<div class="panel-heading">Menu</div>
|
||||
<div class="panel-block column">
|
||||
<form onsubmit={onSearch}>
|
||||
<div class="field">
|
||||
@ -128,21 +131,30 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="panel-block column">
|
||||
<div class="menu">
|
||||
<ul class="menu-list">
|
||||
{#each tags as tag (tag)}
|
||||
<li>
|
||||
<TagLinkNumbered
|
||||
class=""
|
||||
tag={tag.tagType +
|
||||
":" +
|
||||
tag.tagName}
|
||||
num={tag.postCount}
|
||||
/>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{#if !loading}
|
||||
<div class="row">
|
||||
<strong>Tags:</strong>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="menu">
|
||||
<ul class="menu-list">
|
||||
{#each tags as tag (tag)}
|
||||
<li>
|
||||
<TagLinkNumbered
|
||||
class=""
|
||||
tag={tag.tagType +
|
||||
":" +
|
||||
tag.tagName}
|
||||
num={tag.postCount}
|
||||
/>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="skeleton-block"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if tagInfo}
|
||||
@ -169,55 +181,64 @@
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-full">
|
||||
<PostGallery {posts} />
|
||||
</div>
|
||||
{#if !loading}
|
||||
<div class="column is-full">
|
||||
<PostGallery {posts} />
|
||||
</div>
|
||||
|
||||
<div class="column is-full">
|
||||
<nav
|
||||
class="pagination is-centered"
|
||||
aria-label="pagination"
|
||||
>
|
||||
<a
|
||||
href={null}
|
||||
onclick={() => changePage(page - 1)}
|
||||
class="pagination-previous"
|
||||
class:is-disabled={page == 1}>Previous</a
|
||||
<div class="column is-full">
|
||||
<nav
|
||||
class="pagination is-centered"
|
||||
aria-label="pagination"
|
||||
>
|
||||
<a
|
||||
href={null}
|
||||
onclick={() => changePage(page + 1)}
|
||||
class="pagination-next"
|
||||
class:is-disabled={page == totalPages}
|
||||
>Next</a
|
||||
>
|
||||
<ul class="pagination-list">
|
||||
{#each pagination as pageEntry}
|
||||
{#if pageEntry == "..."}
|
||||
<li>
|
||||
<span
|
||||
class="pagination-ellipsis"
|
||||
>…</span
|
||||
>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<a
|
||||
href={null}
|
||||
onclick={() =>
|
||||
changePage(pageEntry)}
|
||||
class="pagination-link"
|
||||
class:is-current={page ==
|
||||
pageEntry}
|
||||
aria-label="Goto page {pageEntry}"
|
||||
>{pageEntry}</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<a
|
||||
href={null}
|
||||
onclick={() => changePage(page - 1)}
|
||||
class="pagination-previous"
|
||||
class:is-disabled={page == 1}
|
||||
>Previous</a
|
||||
>
|
||||
<a
|
||||
href={null}
|
||||
onclick={() => changePage(page + 1)}
|
||||
class="pagination-next"
|
||||
class:is-disabled={page == totalPages}
|
||||
>Next</a
|
||||
>
|
||||
<ul class="pagination-list">
|
||||
{#each pagination as pageEntry}
|
||||
{#if pageEntry == "..."}
|
||||
<li>
|
||||
<span
|
||||
class="pagination-ellipsis"
|
||||
>…</span
|
||||
>
|
||||
</li>
|
||||
{:else}
|
||||
<li>
|
||||
<a
|
||||
href={null}
|
||||
onclick={() =>
|
||||
changePage(
|
||||
pageEntry,
|
||||
)}
|
||||
class="pagination-link"
|
||||
class:is-current={page ==
|
||||
pageEntry}
|
||||
aria-label="Goto page {pageEntry}"
|
||||
>{pageEntry}</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="column">
|
||||
<div class="skeleton-block"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,13 +6,16 @@
|
||||
import TagTypeIndicator from '$lib/components/ui/TagTypeIndicator.svelte';
|
||||
|
||||
let tags = $state([]);
|
||||
let loading = $state(false);
|
||||
|
||||
const getData = async () => {
|
||||
const data = await getTags();
|
||||
tags = data;
|
||||
loading = false;
|
||||
};
|
||||
|
||||
afterNavigate(() => {
|
||||
loading = true;
|
||||
getData();
|
||||
})
|
||||
</script>
|
||||
@ -21,6 +24,7 @@
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Tag List</h1>
|
||||
{#if !loading}
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -41,5 +45,8 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
<div class="skeleton-block"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@ -8,7 +8,6 @@
|
||||
import EditTagPanel from "$lib/components/panels/EditTagPanel.svelte";
|
||||
import PostGallery from "$lib/components/ui/PostGallery.svelte";
|
||||
|
||||
|
||||
import { page } from "$app/stores";
|
||||
let { tag } = $state($page.params);
|
||||
|
||||
@ -51,9 +50,9 @@
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{#if data}
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{#if data}
|
||||
{#if renameMenuShown}
|
||||
<EditTagPanel
|
||||
{tag}
|
||||
@ -64,8 +63,12 @@
|
||||
{:else}
|
||||
<ViewTagPanel {tag} {data} {toggleRenameMenu} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{:else}
|
||||
<div class="skeleton-block"></div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{#if data}
|
||||
{#if editMenuShown}
|
||||
<EditTagNotesPanel
|
||||
{tag}
|
||||
@ -78,8 +81,10 @@
|
||||
{/if}
|
||||
<h1 class="title">Posts</h1>
|
||||
<PostGallery {posts} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="skeleton-block"></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user