small code refactoring and "loading..."-state when fetching takes long

Author: manuel0804

website/src/pages/FriendlistView.vue

@@ -2,27 +2,32 @@
   <Navbar />
   <div class="friendlist-page">
     <FriendSearchBar v-model:search="search" />
-    <div v-if="search" class="search-results-section">
-      <h3 class="result-headline">Search Results</h3>
+    <div v-if="loading" class="loading-indicator">
+      Loading...
+    </div>
+    <template v-else>
+      <div v-if="search" class="search-results-section">
+        <h3 class="result-headline">Search Results</h3>
+        <div class="friend-grid">
+          <FriendCard
+            v-for="user in filteredUserResults"
+            :key="user.id"
+            :friend="user"
+            :isFriend="false"
+            @add-friend="addFriend"
+          />
+        </div>
+      </div>
       <div class="friend-grid">
         <FriendCard
-          v-for="user in filteredUserResults"
-          :key="user.id"
-          :friend="user"
-          :isFriend="false"
-          @add-friend="addFriend"
+          v-for="friend in filteredFriends"
+          :key="friend.id"
+          :friend="friend"
+          :isFriend="true"
+          @unfollow="unfollowFriend"
         />
       </div>
-    </div>
-    <div class="friend-grid">
-      <FriendCard
-        v-for="friend in filteredFriends"
-        :key="friend.id"
-        :friend="friend"
-        :isFriend="true"
-        @unfollow="unfollowFriend"
-      />
-    </div>
+    </template>
   </div>
 </template>
 
@@ -33,37 +38,61 @@ import FriendSearchBar from '@/components/FriendSearchBar.vue';
 import FriendCard from '@/components/FriendCard.vue';
 import backendApi from '@/api/backend-api';
 
+interface User {
+  id: string;
+  username: string;
+  email: string;
+  rocketPoints: number;
+  steps?: number;
+  image?: string;
+}
+
 const search = ref('');
-const friends = ref<any[]>([]);
-const allUsers = ref<any[]>([]);
+const friends = ref<User[]>([]);
+const allUsers = ref<User[]>([]);
 
 const fetchFriends = async () => {
-  const res = await backendApi.getFriends();
-  friends.value = res.data.map((f: any) => ({
-    id: f.id,
-    username: f.username,
-    email: f.email,
-    rocketPoints: f.rocket_points,
-    steps: f.steps,
-    image: f.image_data ? `data:image/png;base64,${f.image_data}` : undefined,
-  }));
+  try {
+    const res = await backendApi.getFriends();
+    friends.value = res.data.map((f: any) => ({
+      id: f.id,
+      username: f.username,
+      email: f.email,
+      rocketPoints: f.rocket_points,
+      steps: f.steps,
+      image: f.image_data ? `data:image/png;base64,${f.image_data}` : undefined,
+    })) as User[];
+  } catch (e) {
+    console.error('Failed to fetch friends:', e);
+    friends.value = [];
+  }
+  
 };
 
 const fetchAllUsers = async () => {
-  const res = await backendApi.getAllUsers();
-  allUsers.value = res.data.map((u: any) => ({
-    id: u.id,
-    username: u.username,
-    email: u.email,
-    rocketPoints: u.rocket_points,
-    steps: u.steps,
-    image: u.image_data ? `data:image/png;base64,${u.image_data}` : undefined,
-  }));
+  try {
+    const res = await backendApi.getAllUsers();
+    allUsers.value = res.data.map((u: any) => ({
+      id: u.id,
+      username: u.username,
+      email: u.email,
+      rocketPoints: u.rocket_points,
+      steps: u.steps,
+      image: u.image_data ? `data:image/png;base64,${u.image_data}` : undefined,
+    }));
+  } catch (e) {
+    console.error('Failed to fetch all users:', e);
+    allUsers.value = [];
+  }
+  
 };
 
-onMounted(() => {
-  fetchFriends();
-  fetchAllUsers();
+const loading = ref(true);
+
+onMounted(async () => {
+  loading.value = true;
+  await Promise.all([fetchFriends(), fetchAllUsers()]);
+  loading.value = false;
 });
 
 const filteredFriends = computed(() =>
@@ -86,7 +115,7 @@ const unfollowFriend = async (id: string) => {
   friends.value = friends.value.filter(f => f.id !== id);
 };
 
-const addFriend = async (user: any) => {
+const addFriend = async (user: User) => {
   try {
     await backendApi.addFriend(user.username);
     await fetchFriends();
@@ -121,4 +150,9 @@ const addFriend = async (user: any) => {
 .search-results-section {
   margin-bottom: 6rem; 
 }
+.loading-indicator {
+  text-align: center;
+  font-size: 1.2rem;
+  margin: 2rem 0;
+}
 </style>