Merge pull request 'CHORE: Fixed loading icon and added it into REPOS page.' (#37) from chore/tailwind-conversion into development
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m24s

Reviewed-on: #37
This commit is contained in:
Luke Else 2025-05-24 13:07:55 +00:00
commit b586385d6d
2 changed files with 47 additions and 28 deletions

View File

@ -21,21 +21,21 @@
left: 0%; left: 0%;
top: 0%; top: 0%;
animation: rotate-one 1s linear infinite; animation: rotate-one 1s linear infinite;
border-bottom: 3px solid var(--fg); border-bottom: 3px solid gray;
} }
.inner.two { .inner.two {
right: 0%; right: 0%;
top: 0%; top: 0%;
animation: rotate-two 1s linear infinite; animation: rotate-two 1s linear infinite;
border-right: 3px solid var(--fg); border-right: 3px solid gray;
} }
.inner.three { .inner.three {
right: 0%; right: 0%;
bottom: 0%; bottom: 0%;
animation: rotate-three 1s linear infinite; animation: rotate-three 1s linear infinite;
border-top: 3px solid var(--fg); border-top: 3px solid gray;
} }
@keyframes rotate-one { @keyframes rotate-one {

View File

@ -1,9 +1,11 @@
<script lang="ts"> <script lang="ts">
import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte'; import { loadRepos, repos } from '$lib/stores';
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git'; import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
import { toasts } from 'svelte-toasts';
import FlexGallery from '$lib/components/FlexGallery.svelte'; import FlexGallery from '$lib/components/FlexGallery.svelte';
import Card from '$lib/components/Cards/Card.svelte'; import Card from '$lib/components/Cards/Card.svelte';
import Loading from '$lib/components/Loading.svelte';
let repoImages: Record<string, string | null> = {}; let repoImages: Record<string, string | null> = {};
@ -18,12 +20,28 @@
} }
})(); })();
} }
onMount(loadRepos);
</script> </script>
<FlexGallery> {#await loadRepos()}
<Loading />
{:then _}
{#if $repos.length == 0}
{console.log("No Repos")}
<div style="display: none;">
{toasts.add({
title: 'Error',
description: 'Failed to load repositories',
duration: 5000,
type: 'error',
placement: 'bottom-center',
showProgress: true
})}
</div>
{/if}
<!-- Repositories loaded successfully -->
<FlexGallery>
{#each $repos as repo} {#each $repos as repo}
<!-- <Loading /> -->
<Card <Card
headerLeft={repo.name} headerLeft={repo.name}
headerRight={repo.language} headerRight={repo.language}
@ -43,4 +61,5 @@
{/if} {/if}
</Card> </Card>
{/each} {/each}
</FlexGallery> </FlexGallery>
{/await}