Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 15:29:36 +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">
export let data;
let adventures: Adventure[] = [];
let isLoading = true;
import AdventureCard from "$lib/components/AdventureCard.svelte";
import type { Adventure } from "$lib/utils/types";
@ -36,6 +37,7 @@
onMount(async () => {
console.log(data);
adventures = data.result.adventures;
isLoading = false;
});
let count = 0;
@ -243,6 +245,12 @@
</div>
{/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}
<SucessToast action={toastAction} />
{/if}
@ -274,14 +282,14 @@
{/each}
</div>
{#if adventures.length == 0}
{#if adventures.length == 0 && !isLoading}
<div class="flex flex-col items-center justify-center mt-16">
<article class="prose mb-4"><h2>Add some adventures!</h2></article>
<img src={mapDrawing} width="25%" alt="Logo" />
</div>
{/if}
{#if adventures.length != 0}
{#if adventures.length != 0 && !isLoading}
<div class="flex justify-center items-center w-full mt-4">
<article class="prose">
<h2 class="text-center">Actions</h2>