Add loading spinner to repo list (#3310)

web/src/views/RepoAdd.vue

@@ -5,6 +5,7 @@
     </template>
 
     <div class="space-y-4">
+      <template v-if="repos !== undefined && repos.length > 0">
         <ListItem
           v-for="repo in searchedRepos"
           :key="repo.id"
@@ -22,6 +23,10 @@
             />
           </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) => {