Add loading spinner to repo list (#3310)

woodpecker-ci · Feb 1, 2024 · a801f8c · a801f8c
1 parent 450a437
commit a801f8c
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/web/src/views/RepoAdd.vue b/web/src/views/RepoAdd.vue
@@ -5,23 +5,28 @@
     </template>
 
     <div class="space-y-4">
-      <ListItem
-        v-for="repo in searchedRepos"
-        :key="repo.id"
-        class="items-center"
-        :to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
-      >
-        <span class="text-wp-text-100">{{ repo.full_name }}</span>
-        <span v-if="repo.active" class="ml-auto text-wp-text-alt-100">{{ $t('repo.enable.enabled') }}</span>
-        <div v-else class="ml-auto flex items-center">
-          <Badge v-if="repo.id" class="<md:hidden mr-2" :label="$t('repo.enable.disabled')" />
-          <Button
-            :text="$t('repo.enable.enable')"
-            :is-loading="isActivatingRepo && repoToActivate?.forge_remote_id === repo.forge_remote_id"
-            @click="activateRepo(repo)"
-          />
-        </div>
-      </ListItem>
+      <template v-if="repos !== undefined && repos.length > 0">
+        <ListItem
+          v-for="repo in searchedRepos"
+          :key="repo.id"
+          class="items-center"
+          :to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
+        >
+          <span class="text-wp-text-100">{{ repo.full_name }}</span>
+          <span v-if="repo.active" class="ml-auto text-wp-text-alt-100">{{ $t('repo.enable.enabled') }}</span>
+          <div v-else class="ml-auto flex items-center">
+            <Badge v-if="repo.id" class="<md:hidden mr-2" :label="$t('repo.enable.disabled')" />
+            <Button
+              :text="$t('repo.enable.enable')"
+              :is-loading="isActivatingRepo && repoToActivate?.forge_remote_id === repo.forge_remote_id"
+              @click="activateRepo(repo)"
+            />
+          </div>
+        </ListItem>
+      </template>
+      <div v-else-if="loading" class="flex justify-center text-wp-text-100">
+        <Icon name="spinner" />
+      </div>
     </div>
   </Scaffold>
 </template>
@@ -49,11 +54,14 @@ const repos = ref<Repo[]>();
 const repoToActivate = ref<Repo>();
 const search = ref('');
 const i18n = useI18n();
+const loading = ref(false);
 
 const { searchedRepos } = useRepoSearch(repos, search);
 
 onMounted(async () => {
+  loading.value = true;
   repos.value = await apiClient.getRepoList({ all: true });
+  loading.value = false;
 });
 
 const { doSubmit: activateRepo, isLoading: isActivatingRepo } = useAsyncAction(async (repo: Repo) => {