From 2939911c993c3817d841d4cb4660aa940e478cc0 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Mon, 17 Mar 2025 22:35:12 +0100
Subject: [PATCH] feat: loading screen

---
 src/views/Profile.vue | 43 ++++++++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 562647c..6300a2c 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -11,15 +11,18 @@
             dark:text-gray-200
           ">
         <img src="/favicon-lfk.png" class="h-20 mx-auto" />
-        <h1 class="text-3xl font-bold whitespace-nowrap font-[Athiti]" v-text="(state.firstname || '') +
-          ' ' +
-          (state.middlename || '') +
-          ' ' +
-          (state.lastname || '')
-          "></h1>
-        <p class="text-md whitespace-nowrap">Team: {{ state.group }}</p>
+        <div v-if="loadstate === 'loaded'">
+          <h1 class="text-3xl font-bold whitespace-nowrap font-[Athiti]" v-text="(state.firstname || '') +
+            ' ' +
+            (state.middlename || '') +
+            ' ' +
+            (state.lastname || '')
+            "></h1>
+          <p class="text-md whitespace-nowrap">Team: {{ state.group }}</p>
+        </div>
+        <h1 v-else class="text-3xl font-bold whitespace-nowrap font-[Athiti]">Daten werden geladen...</h1>
       </div>
-      <div class="flex flex-wrap">
+      <div v-if="loadstate === 'loaded'" class="flex flex-wrap">
         <div class="w-full">
           <div class="flex flex-wrap flex-col w-full tabs">
             <div class="flex lg:flex-wrap flex-row lg:space-x-2 justify-center">
@@ -287,7 +290,8 @@
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
                     <div>
                       <label for="sponsorvorname"
-                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('vorname_des_sponsors') }}</label>
+                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                          $t('vorname_des_sponsors') }}</label>
                       <input v-bind="newsponsor_vorname" type="text" name="sponsorvorname" id="sponsorvorname"
                         placeholder="Vorname des Sponsors"
                         class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
@@ -295,7 +299,8 @@
 
                     <div>
                       <label for="sponsornachname"
-                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('nachname_des_sponsors') }}</label>
+                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                          $t('nachname_des_sponsors') }}</label>
                       <input v-bind="newsponsor_nachname" type="text" name="sponsornachname" id="sponsornachname"
                         placeholder="Nachname des Sponsors"
                         class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
@@ -305,23 +310,23 @@
                     <!-- End Grid -->
 
                     <div>
-                      <label for="sponsortel"
-                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('telefonnummer_des_sponsors') }}</label>
+                      <label for="sponsortel" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                        $t('telefonnummer_des_sponsors') }}</label>
                       <input v-bind="newsponsor_tel" type="tel" name="sponsortel" id="sponsortel" autocomplete="tel"
                         class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                     </div>
 
                     <div>
-                      <label for="sponsormail"
-                        class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('e_mail_des_sponsors') }}</label>
+                      <label for="sponsormail" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                        $t('e_mail_des_sponsors') }}</label>
                       <input v-bind="newsponsor_mail" type="email" name="sponsormail" id="sponsormail"
                         class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
                     </div>
 
                   </div>
                   <div>
-                    <label for="eurokilometer"
-                      class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{ $t('sponsoring_pro_kilometer_in_eur') }}</label>
+                    <label for="eurokilometer" class="block mb-2 text-sm text-gray-700 font-medium dark:text-white">{{
+                      $t('sponsoring_pro_kilometer_in_eur') }}</label>
                     <input v-bind="newsponsor_value" type="number" name="eurokilometer" id="eurokilometer"
                       placeholder="z.B. 1€ ODER 0,50€"
                       class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg border sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
@@ -337,7 +342,8 @@
                     class="shrink-0 mt-1.5 border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
                 </div>
                 <div class="ms-3">
-                  <label for="sponsor_agree" class="text-sm text-gray-600 dark:text-neutral-400">{{ $t('sponsor_add_agree') }}</label>
+                  <label for="sponsor_agree" class="text-sm text-gray-600 dark:text-neutral-400">{{
+                    $t('sponsor_add_agree') }}</label>
                 </div>
               </div>
               <!-- End Checkbox -->
@@ -491,6 +497,7 @@ import { toCanvas } from "bwip-js";
 import Footer from "@/components/Footer.vue";
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
+const loadstate = ref("loading")
 const mode = ref("")
 // 
 const newsponsor_check = ref(false)
@@ -566,6 +573,7 @@ function getReadableDistance(distance) {
 axios
   .get(`${config.baseurl}api/runners/me/${accesstoken}`)
   .then(({ data }) => {
+    loadstate.value = "loaded"
     state.phone = data.phone;
     state.email = data.email;
     state.firstname = data.firstname;
@@ -577,6 +585,7 @@ axios
     state.barcode = textToBase64Barcode(data.id ?? "???");
   })
   .catch((error) => {
+    loadstate = "error"
     toast.clear();
     toast.error(t('profil_konnte_nicht_geladen_werden'));
   });