fix(profile): improper image loading when switching between users

src/components/PlayerProfileView/ProfilePlayerAvatar.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="player-avatar">
     <img
-      v-if="avatarId"
-      v-show="avatarLoadingStatus == Status.Data.Loaded"
-      :src="avatarSrc"
+      v-if="props.playerTD2Info && props.playerTD2Info.avatar"
+      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${props.playerTD2Info.avatar};type=avatar`"
       class="player-avatar-image"
       ref="avatarImageRef"
       alt="player image"
@@ -12,32 +11,36 @@
     />
 
     <img
-      v-if="avatarLoadingStatus == Status.Data.Error || avatarId == 0"
+      v-if="
+        avatarLoadingStatus == Status.Data.Error ||
+        (props.playerTD2Info && !props.playerTD2Info.avatar)
+      "
       class="img-placeholder"
       height="100"
       src="/images/default-avatar.jpg"
     />
 
-    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading || avatarId === undefined" />
+    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, onMounted, PropType, ref, useTemplateRef } from 'vue';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
+import { Td2API } from '../../typings/api';
 
 const props = defineProps({
-  avatarId: {
-    type: Number
+  playerTD2Info: {
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
   }
 });
 
-const avatarSrc = computed(
-  () => `https://td2.info.pl/index.php?action=dlattach;attach=${props.avatarId};type=avatar`
-);
+onMounted(() => {
+  console.log(avatarImageRef.value);
+});
 
-const avatarImageRef = ref<HTMLImageElement | null>(null);
+const avatarImageRef = useTemplateRef('avatarImageRef');
 const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
 
 function onAvatarLoadSuccess() {

src/components/PlayerProfileView/ProfileSummary.vue

@@ -2,7 +2,7 @@
   <section class="profile-summary">
     <div class="player-info">
       <div class="info-main">
-        <ProfilePlayerAvatar :avatarId="playerTD2Info?.avatar" />
+        <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
 
         <div>
           <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
@@ -69,9 +69,9 @@
             </a>
           </div>
 
-          <!-- Current activity -->
+          <!-- Current activities -->
           <div
-            class="player-activity"
+            class="player-activities-box"
             v-if="activeDispatches.length > 0 || activeTrains.length > 0"
           >
             <div class="info-activity" v-if="activeDispatches.length > 0">
@@ -348,8 +348,6 @@ const activeTrains = computed(() => {
 
     gap: 0.25em;
     font-weight: bold;
-
-    padding: 0.25em 0.5em;
     border-radius: 0.5em;
   }
 }

src/views/PlayerProfileView.vue

@@ -105,6 +105,7 @@ async function fetchPlayerData() {
     playerJournalStatus.value = Status.Data.Loading;
 
     playerInfo.value = undefined;
+    playerTD2Info.value = undefined;
     playerJournal.value = undefined;
   }