feat(VCST-4085): optimize page loading async white labeling and router

client-app/app-runner.ts

@@ -39,6 +39,7 @@ import type { StoreResponseType } from "./core/api/graphql/types";
 
 // eslint-disable-next-line no-restricted-exports
 export default async () => {
+  console.time("app-runner");
   const appSelector = "#app";
   const appElement = document.querySelector<HTMLElement | SVGElement>(appSelector);
 
@@ -67,7 +68,7 @@ export default async () => {
   app.use(authPlugin);
 
   const { fetchUser, user, isAuthenticated } = useUser();
-  const { themeContext, addPresetToThemeContext, setThemeContext } = useThemeContext();
+  const { themeContext, setThemeContext } = useThemeContext();
   const {
     currentLanguage,
     currentMaybeShortLocale,
@@ -80,7 +81,7 @@ export default async () => {
   const { currentCurrency } = useCurrency();
   const { init: initializeHotjar } = useHotjar();
   const { fetchCatalogMenu } = useNavigations();
-  const { themePresetName, fetchWhiteLabelingSettings } = useWhiteLabeling();
+  const { fetchWhiteLabelingSettings } = useWhiteLabeling();
 
   const fallback = {
     locale: FALLBACK_LOCALE,
@@ -103,6 +104,8 @@ export default async () => {
 
   setThemeContext(store);
 
+  void fetchWhiteLabelingSettings();
+
   /**
    * Creating plugin instances
    */
@@ -135,9 +138,6 @@ export default async () => {
    * Other settings
    */
 
-  await fetchWhiteLabelingSettings();
-  addPresetToThemeContext(themePresetName.value ?? themeContext.value.defaultPresetName);
-
   if (isAuthenticated.value || themeContext.value.storeSettings.anonymousUsersAllowed) {
     void fetchCatalogMenu();
   }
@@ -194,7 +194,10 @@ export default async () => {
   // Register Page builder product components globally
   Object.entries(ProductBlocks).forEach(([name, component]) => app.component(name, component));
 
-  await router.isReady();
+  const optimizedPaths = ["/"];
+  if (!optimizedPaths.includes(router.currentRoute.value.path)) {
+    await router.isReady();
+  }
 
   app.config.warnHandler = (msg, _, trace) => {
     // to remove builder.io warnings
@@ -206,4 +209,5 @@ export default async () => {
   };
 
   app.mount(appElement);
+  console.timeEnd("app-runner");
 };

client-app/core/composables/useWhiteLabeling.ts

@@ -4,28 +4,64 @@ import { getGetWhiteLabelingSettings } from "@/core/api/graphql/whiteLabeling/qu
 import { WHITE_LABELING_FETCHED_SETTINGS_EVENT } from "@/core/constants/modules-events";
 import { Logger, convertToExtendedMenuLink } from "@/core/utilities";
 import { useThemeContext } from "./useThemeContext";
+import type { IThemeConfigPreset } from "../types";
 import type { WhiteLabelingSettingsType } from "@/core/api/graphql/types";
 
 const whiteLabelingSettings = shallowRef<WhiteLabelingSettingsType>();
-const { modulesSettings, themeContext } = useThemeContext();
 
 const MODULE_KEYS = {
   ID: "VirtoCommerce.WhiteLabeling",
   ENABLE_STATE: "WhiteLabeling.WhiteLabelingEnabled",
 };
 
-const moduleSettings = computed(() => modulesSettings.value?.find((module) => module.moduleId === MODULE_KEYS.ID));
-const moduleEnabled = computed(
-  () => moduleSettings.value?.settings?.find((item) => item.name === MODULE_KEYS.ENABLE_STATE)?.value,
-);
-
 const { emit } = useEventBus(WHITE_LABELING_FETCHED_SETTINGS_EVENT);
 
+const styleElement = document.createElement("style");
+let styleElementAdded = false;
+
+function addPresetStylesToDocument(preset?: IThemeConfigPreset) {
+  if (!preset) {
+    return;
+  }
+
+  let styleText = "";
+
+  styleText += ":root {";
+
+  Object.entries(preset).forEach(([key, value]) => {
+    styleText += `--${key.replace(/_/g, "-")}: ${value};`;
+  });
+
+  styleText += "}";
+
+  if (!styleElementAdded || styleElement.innerText !== styleText) {
+    styleElement.innerText = styleText;
+    document.head.prepend(styleElement);
+    styleElementAdded = true;
+  }
+}
+
 function _useWhiteLabeling() {
+  const { themeContext, addPresetToThemeContext, modulesSettings } = useThemeContext();
+
+  const moduleSettings = computed(() => modulesSettings.value?.find((module) => module.moduleId === MODULE_KEYS.ID));
+  const moduleEnabled = computed(
+    () => moduleSettings.value?.settings?.find((item) => item.name === MODULE_KEYS.ENABLE_STATE)?.value,
+  );
+
   async function fetchWhiteLabelingSettings(): Promise<void> {
     if (moduleEnabled.value) {
       try {
+        addPresetToThemeContext(themeContext.value?.defaultPresetName);
+        addPresetStylesToDocument(themeContext.value?.preset);
+
         whiteLabelingSettings.value = await getGetWhiteLabelingSettings();
+
+        if (whiteLabelingSettings.value?.themePresetName) {
+          addPresetToThemeContext(whiteLabelingSettings.value?.themePresetName);
+          addPresetStylesToDocument(themeContext.value?.preset);
+        }
+
         emit(whiteLabelingSettings.value);
       } catch (e) {
         Logger.error(`${_useWhiteLabeling.name}.${fetchWhiteLabelingSettings.name}`, e);

client-app/core/plugins/config.plugin.ts

@@ -6,18 +6,5 @@ export const configPlugin: Plugin<IThemeContext> = {
   install: (app: App, options: IThemeContext) => {
     app.config.globalProperties.$cfg = options.settings;
     app.provide(configInjectionKey, options.settings);
-
-    if (options.preset) {
-      // Set CSS variables to use as TailwindCSS arbitrary values: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
-      const styleElement = document.createElement("style");
-      styleElement.innerText = ":root {";
-
-      Object.entries(options.preset).forEach(([key, value]) => {
-        styleElement.innerText += `--${key.replace(/_/g, "-")}: ${value};`;
-      });
-
-      styleElement.innerText += "}";
-      document.head.prepend(styleElement);
-    }
   },
 };