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
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:
commit
b586385d6d
@ -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 {
|
||||||
|
@ -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}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user