Add loading spinner and no pull request text (#3113)

web/src/assets/locales/en.json

@@ -15,6 +15,7 @@
   "unknown_error": "An unknown error occurred",
   "documentation_for": "Documentation for \"{topic}\"",
   "pipeline_feed": "Pipeline feed",
+  "empty_list": "No {entity} found!",
   "not_found": {
     "not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
     "back_home": "Back to home"

web/src/components/atomic/Icon.vue

@@ -51,6 +51,7 @@
   <i-teenyicons-refresh-outline v-else-if="name === 'refresh'" class="h-6 w-6" />
   <i-ic-baseline-play-arrow v-else-if="name === 'play'" class="h-6 w-6" />
   <i-ic-baseline-pause v-else-if="name === 'pause'" class="h-6 w-6" />
+  <i-svg-spinners-180-ring-with-bg v-else-if="name === 'spinner'" class="h-6 w-6" />
   <div v-else-if="name === 'blank'" class="h-6 w-6" />
 </template>
 
@@ -105,6 +106,7 @@ export type IconNames =
   | 'pause'
   | 'warning'
   | 'attention'
+  | 'spinner'
   | 'error';
 
 defineProps<{

web/src/views/repo/RepoBranches.vue

@@ -1,14 +1,19 @@
 <template>
-  <div v-if="branches" class="space-y-4">
+  <div class="space-y-4">
-    <ListItem
+    <template v-if="branches.length > 0">
-      v-for="branch in branchesWithDefaultBranchFirst"
+      <ListItem
-      :key="branch"
+        v-for="branch in branchesWithDefaultBranchFirst"
-      class="text-wp-text-100"
+        :key="branch"
-      :to="{ name: 'repo-branch', params: { branch } }"
+        class="text-wp-text-100"
-    >
+        :to="{ name: 'repo-branch', params: { branch } }"
-      {{ branch }}
+      >
-      <Badge v-if="branch === repo?.default_branch" :label="$t('default')" class="ml-auto" />
+        {{ branch }}
-    </ListItem>
+        <Badge v-if="branch === repo?.default_branch" :label="$t('default')" class="ml-auto" />
+      </ListItem>
+    </template>
+    <div v-else-if="loading" class="flex justify-center text-wp-text-100">
+      <Icon name="spinner" />
+    </div>
   </div>
 </template>
 
@@ -36,7 +41,7 @@ async function loadBranches(page: number): Promise<string[]> {
   return apiClient.getRepoBranches(repo.value.id, page);
 }
 
-const { resetPage, data: branches } = usePagination(loadBranches);
+const { resetPage, data: branches, loading } = usePagination(loadBranches);
 
 const branchesWithDefaultBranchFirst = computed(() =>
   branches.value.toSorted((a, b) => {

web/src/views/repo/RepoPullRequests.vue

@@ -1,24 +1,34 @@
 <template>
-  <div v-if="pullRequests" class="space-y-4">
+  <div class="space-y-4">
-    <ListItem
+    <template v-if="pullRequests.length > 0">
-      v-for="pullRequest in pullRequests"
+      <ListItem
-      :key="pullRequest.index"
+        v-for="pullRequest in pullRequests"
-      class="text-wp-text-100"
+        :key="pullRequest.index"
-      :to="{ name: 'repo-pull-request', params: { pullRequest: pullRequest.index } }"
+        class="text-wp-text-100"
-    >
+        :to="{ name: 'repo-pull-request', params: { pullRequest: pullRequest.index } }"
-      <span class="text-wp-text-alt-100 <md:hidden">#{{ pullRequest.index }}</span>
+      >
-      <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+        <span class="text-wp-text-alt-100 <md:hidden">#{{ pullRequest.index }}</span>
-      <span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+        <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
-        pullRequest.title
+        <span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
-      }}</span>
+          pullRequest.title
-    </ListItem>
+        }}</span>
+      </ListItem>
+    </template>
+    <div v-else-if="loading" class="flex justify-center text-wp-text-100">
+      <Icon name="spinner" />
+    </div>
+    <Panel v-else class="flex justify-center">
+      {{ $t('empty_list', { entity: $t('repo.pull_requests') }) }}
+    </Panel>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { inject, Ref, watch } from 'vue';
 
+import Icon from '~/components/atomic/Icon.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
+import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { usePagination } from '~/compositions/usePaginate';
 import { PullRequest, Repo } from '~/lib/api/types';
@@ -41,7 +51,7 @@ async function loadPullRequests(page: number): Promise<PullRequest[]> {
   return apiClient.getRepoPullRequests(repo.value.id, page);
 }
 
-const { resetPage, data: pullRequests } = usePagination(loadPullRequests);
+const { resetPage, data: pullRequests, loading } = usePagination(loadPullRequests);
 
 watch(repo, resetPage);
 </script>