Added achievement data

resources/js/Components/FlightsGoneBy/ProfileLayout.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import {Flight, User} from "@/Types/types";
 import ProfileHeader from "@/Components/FlightsGoneBy/ProfileHeader.vue";
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
 
 defineProps<{
     user: User
-    flights: Flight[]
+    flightCount?: number
+    achievementCount? : number
     isFollowing: boolean
+    loading: boolean
 }>()
 </script>
 
 <template>
     <div class="board-wrapper">
-        <ProfileHeader :is-following="isFollowing" :user="user" :flights="flights" />
-        <slot />
+        <ProfileHeader :is-following="isFollowing" :user="user" :flightCount="flightCount" />
+        <div v-if="loading" class="loading-state">
+            <PlaneLoader />
+        </div>
+        <slot v-else />
     </div>
 </template>
 
@@ -24,6 +30,27 @@ defineProps<{
     width: 100%;
 }
 
+.loading-state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 50dvh;
+}
+
+.spinner {
+    display: block;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
 @media (max-width: 1200px) {
     .board-wrapper {
         padding: 1em 0.25em;