fix(profile): player avatar loading

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);
 

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;