From 1365140802f4b8db85385241ad577c44b1f9f1cd Mon Sep 17 00:00:00 2001 From: Spythere Date: Sun, 8 Feb 2026 01:34:59 +0100 Subject: [PATCH] chore(profile): added loading status --- src/views/PlayerProfileView.vue | 53 +++++++++++++++++++++++++++++---- 1 file changed, 48 insertions(+), 5 deletions(-) diff --git a/src/views/PlayerProfileView.vue b/src/views/PlayerProfileView.vue index dd39449..6691b8d 100644 --- a/src/views/PlayerProfileView.vue +++ b/src/views/PlayerProfileView.vue @@ -1,6 +1,6 @@ @@ -282,6 +293,8 @@ import { humanizeDuration } from '../composables/time'; import { useI18n } from 'vue-i18n'; import axios from 'axios'; import { getCountPercentage } from '../utils/calcUtils'; +import { Status } from '../typings/common'; +import Loading from '../components/Global/Loading.vue'; type JournalEntryType = 'Timetable' | 'Dispatcher' | 'IssuedTimetable'; @@ -300,6 +313,7 @@ const playerName = ref(''); const playerInfo = ref(null); const playerJournal = ref(null); const playerTD2Info = ref(null); +const playerDataStatus = ref(Status.Data.Initialized); const activeFilterTypes = reactive>({ Timetable: true, @@ -361,18 +375,29 @@ const combinedJournal = computed(() => { async function fetchAllData() { const playerId = route.query.playerId?.toString(); - if (!playerId) return; + playerDataStatus.value = Status.Data.Loading; + + if (!playerId) { + playerDataStatus.value = Status.Data.Loaded; + return; + } const playerInfoResponse = await fetchPlayerInfoData(playerId); - if (!playerInfoResponse) return; + if (!playerInfoResponse) { + playerDataStatus.value = Status.Data.Loaded; + return; + } playerName.value = playerInfoResponse.driverStats.driverName || playerInfoResponse.dispatcherStats.dispatcherName || ''; - if (!playerName.value) return; + if (!playerName.value) { + playerDataStatus.value = Status.Data.Loaded; + return; + } const playerTd2InfoResponse = await fetchPlayerTD2Info(playerName.value); const playerJournalResponse = await fetchPlayerJournal(playerId); @@ -380,6 +405,8 @@ async function fetchAllData() { playerInfo.value = playerInfoResponse; playerTD2Info.value = playerTd2InfoResponse; playerJournal.value = playerJournalResponse; + + playerDataStatus.value = Status.Data.Loaded; } async function fetchPlayerInfoData(playerId: string) { @@ -465,6 +492,22 @@ $tileColor: #181818; justify-content: center; } +.no-data-found { + text-align: center; + + max-width: var(--max-container-width); + width: 100%; + background-color: $tileColor; + padding: 1em; + margin: 1em; + + a { + display: inline-block; + text-decoration: underline; + margin-top: 0.5em; + } +} + .view-container { display: grid; grid-template-columns: 500px 1fr;