Add loading spinner to repo list (#3310)

This commit is contained in:
Lukas 2024-02-01 08:40:01 +01:00 committed by GitHub
parent 450a437cb6
commit a801f8cbc3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -5,6 +5,7 @@
</template> </template>
<div class="space-y-4"> <div class="space-y-4">
<template v-if="repos !== undefined && repos.length > 0">
<ListItem <ListItem
v-for="repo in searchedRepos" v-for="repo in searchedRepos"
:key="repo.id" :key="repo.id"
@ -22,6 +23,10 @@
/> />
</div> </div>
</ListItem> </ListItem>
</template>
<div v-else-if="loading" class="flex justify-center text-wp-text-100">
<Icon name="spinner" />
</div>
</div> </div>
</Scaffold> </Scaffold>
</template> </template>
@ -49,11 +54,14 @@ const repos = ref<Repo[]>();
const repoToActivate = ref<Repo>(); const repoToActivate = ref<Repo>();
const search = ref(''); const search = ref('');
const i18n = useI18n(); const i18n = useI18n();
const loading = ref(false);
const { searchedRepos } = useRepoSearch(repos, search); const { searchedRepos } = useRepoSearch(repos, search);
onMounted(async () => { onMounted(async () => {
loading.value = true;
repos.value = await apiClient.getRepoList({ all: true }); repos.value = await apiClient.getRepoList({ all: true });
loading.value = false;
}); });
const { doSubmit: activateRepo, isLoading: isActivatingRepo } = useAsyncAction(async (repo: Repo) => { const { doSubmit: activateRepo, isLoading: isActivatingRepo } = useAsyncAction(async (repo: Repo) => {