From 48c0a320179ad945cd671df552b3756f6420cc6a Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 25 Feb 2026 21:16:19 +0100
Subject: [PATCH] fix(profile): player avatar loading

---
 .../PlayerProfileView/ProfilePlayerAvatar.vue         | 11 ++++++++---
 src/views/PlayerProfileView.vue                       |  5 ++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/PlayerProfileView/ProfilePlayerAvatar.vue b/src/components/PlayerProfileView/ProfilePlayerAvatar.vue
index 00d41d5..d33393c 100644
--- a/src/components/PlayerProfileView/ProfilePlayerAvatar.vue
+++ b/src/components/PlayerProfileView/ProfilePlayerAvatar.vue
@@ -2,9 +2,10 @@
   <div class="player-avatar">
     <img
       v-if="avatarId"
+      v-show="avatarLoadingStatus == Status.Data.Loaded"
+      :src="avatarSrc"
       class="player-avatar-image"
       ref="avatarImageRef"
-      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${avatarId};type=avatar`"
       alt="player image"
       @load="onAvatarLoadSuccess"
       @error="onAvatarLoadError"
@@ -22,16 +23,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
 
-defineProps({
+const props = defineProps({
   avatarId: {
     type: Number
   }
 });
 
+const avatarSrc = computed(
+  () => `https://td2.info.pl/index.php?action=dlattach;attach=${props.avatarId};type=avatar`
+);
+
 const avatarImageRef = ref<HTMLImageElement | null>(null);
 const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
 
diff --git a/src/views/PlayerProfileView.vue b/src/views/PlayerProfileView.vue
index 4ae32e7..7669eb6 100644
--- a/src/views/PlayerProfileView.vue
+++ b/src/views/PlayerProfileView.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
 import { onActivated, onDeactivated, ref } from 'vue';
-import { onBeforeRouteUpdate, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useApiStore } from '../store/apiStore';
 import { API, Td2API } from '../typings/api';
 import { useI18n } from 'vue-i18n';
@@ -103,6 +103,9 @@ async function fetchPlayerData() {
   if (queryPlayerId != playerId.value) {
     playerInfoStatus.value = Status.Data.Loading;
     playerJournalStatus.value = Status.Data.Loading;
+
+    playerInfo.value = undefined;
+    playerJournal.value = undefined;
   }
 
   playerId.value = queryPlayerId;