Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-27 16:59:37 +02:00
Code Issues Releases Activity

Add loading spinner to log page

Browse source
This commit is contained in:
Sean Morley 2024-04-11 13:59:36 +00:00
parent cc7e950f5c
commit ea0477d450
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/routes/log/+page.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
export let data; export let data;
let adventures: Adventure[] = []; let adventures: Adventure[] = [];
let isLoading = true;
import AdventureCard from "$lib/components/AdventureCard.svelte"; import AdventureCard from "$lib/components/AdventureCard.svelte";
import type { Adventure } from "$lib/utils/types"; import type { Adventure } from "$lib/utils/types";
@ -36,6 +37,7 @@
onMount(async () => { onMount(async () => {
console.log(data); console.log(data);
adventures = data.result.adventures; adventures = data.result.adventures;
isLoading = false;
}); });
let count = 0; let count = 0;
@ -243,6 +245,12 @@
</div> </div>
{/if} {/if}
{#if isLoading}
<div class="flex justify-center items-center w-full mt-16">
<span class="loading loading-spinner w-24 h-24"></span>
</div>
{/if}
{#if isShowingToast} {#if isShowingToast}
<SucessToast action={toastAction} /> <SucessToast action={toastAction} />
{/if} {/if}
@ -274,14 +282,14 @@
{/each} {/each}
</div> </div>
{#if adventures.length == 0} {#if adventures.length == 0 && !isLoading}
<div class="flex flex-col items-center justify-center mt-16"> <div class="flex flex-col items-center justify-center mt-16">
<article class="prose mb-4"><h2>Add some adventures!</h2></article> <article class="prose mb-4"><h2>Add some adventures!</h2></article>
<img src={mapDrawing} width="25%" alt="Logo" /> <img src={mapDrawing} width="25%" alt="Logo" />
</div> </div>
{/if} {/if}
{#if adventures.length != 0} {#if adventures.length != 0 && !isLoading}
<div class="flex justify-center items-center w-full mt-4"> <div class="flex justify-center items-center w-full mt-4">
<article class="prose"> <article class="prose">
<h2 class="text-center">Actions</h2> <h2 class="text-center">Actions</h2>