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

src/App.vue

@@ -6,8 +6,14 @@
         <side-bar></side-bar>
       </div>
 
-      <div class="pl-60 w-full min-h-screen flex justify-center items-center bg-green">
-        <router-view></router-view>
+      <div class="pl-60 w-full min-h-screen">
+
+        <div v-if="!brandingStore.loading"
+             class="flex justify-center items-center"
+             :style="{backgroundColor: brandingStore.colors.background}">
+          <router-view></router-view>
+        </div>
+
       </div>
 
     </div>
@@ -20,6 +26,9 @@
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
 import SizeIndicator from "@/views/tools/SizeIndicator.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore()
 </script>
 
 <style scoped>