Colors + profile mapping + socialNetworks urls. Missing images

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app v-if="isUserLoaded">
     <div class="m-0 flex flex-column h-screen">
       <Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
       <div class="flex flex-row relative">
@@ -27,20 +27,30 @@
   </v-app>
 </template>
 
-<script setup>
+<script async setup>
 import Header from "@/views/main/Header.vue";
 import Footer from "@/views/main/Footer.vue";
 import SideBar from "@/views/main/SideBar.vue";
-import {ref, onMounted, onUnmounted} from 'vue';
-import StripePayment from "@/views/StripePayment.vue";
+import {ref, onMounted, onUnmounted, onBeforeMount} from 'vue';
 import {eventBus} from '@/eventBus.js';
+import {useUserStore} from "@/stores/user.js";
+import {useClient} from "@/plugins/api.js";
 
 const hideSideBar = ref(false);
+const isUserLoaded = ref(false);
 const showPopup = ref(false);
 const popup = ref(null);
 const popupButton = ref(null);
 let closeSidebarTimer = null;
 
+let client = useClient();
+let userStore = useUserStore();
+
+onBeforeMount(async () => {
+  await userStore.setCurrentUser(client);
+  isUserLoaded.value = true;
+});
+
 const toggleSidebar = () => {
   hideSideBar.value = !hideSideBar.value;
 };