Fix the timing/loading issues with branding when navigating the site

src/stores/brandingStore.js

@@ -1,53 +1,71 @@
 import {defineStore} from 'pinia'
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
-import {onBeforeMount, ref, watch} from "vue";
+import {ref, watch} from "vue";
 import {useRoute} from "vue-router";
 
 export const useBrandingStore = defineStore(
     'branding',
     () => {
 
-        const currentBrand = ref('')
+        const currentBrand = ref(undefined)
+        const loading = ref(false)
 
         const value = useSessionStorage(
             'branding',
             {},
             {writeDefaults: false})
 
-        const loading = ref(true)
+        const defaultColors = {
+            "background": "#f4f4f4",
+            "error": "#f4f4f4",
+            "primary": "#f4f4f4",
+            "secondary": "#f4f4f4",
+            "surface": "#f4f4f4",
+            "onBackground": "#000",
+            "onError": "#000",
+            "onPrimary": "#000",
+            "onSecondary": "#000",
+            "onSurface": "#000",
+        }
+        const colors = ref(defaultColors)
 
         const route = useRoute()
-
-        onBeforeMount(async () => await fetchCreatorData(route.params.creator))
-
         watch(
             () => route.params.creator,
-            async () => {
-                if (route.params.creator !== currentBrand.value) {
-                    if (route.params.creator !== undefined) {                        
-                        await fetchCreatorData(route.params.creator)
-                        currentBrand.value = route.params.creator
+            async (newCreator, oldCreator) => {
+                loading.value = true
+
+                if (newCreator !== oldCreator) {
+                    if (newCreator !== undefined) {
+                        value.value = await fetchCreatorData(newCreator)
+                        currentBrand.value = newCreator
+                        colors.value = value.value.colors
+                    } else {
+                        value.value = {}
+                        currentBrand.value = undefined
+                        colors.value = defaultColors
                     }
                 }
+
+                loading.value = false
             }
         )
 
         const fetchCreatorData = async (creatorAlias) => {
             try {
-                loading.value = true
                 const client = useClient()
                 const response = await client.get(`/api/creators/@${creatorAlias}`)
-                value.value = response.data
+                return response.data
             } catch (error) {
                 console.error(`Error fetching content: ${error}`)
-            } finally {
-                loading.value = false
             }
         }
 
         return {
+            currentBrand,
             value,
+            colors,
             loading
         }
     })