PB-1383: Avoid concurrency between app setup and URL parsing

Issue: When starting the app for the first time, the URL sync plugin would start
being active before the topics were fully set, causing (mainly) the background layer
parameter to be ignored and replaced with the topic's default one

Fix: The `ConfigLoaded` state now wait for the background layer to be set before
being fulfilled.

Author: ltkum

packages/viewer/src/store/modules/app/index.ts

@@ -51,15 +51,24 @@ const initiateUrlParsing: AppState = {
 
 const parseLegacyUrlParams: AppState = {
     name: AppStateNames.LegacyParsing,
-    isFulfilled: () => !isLegacyParams(window?.location?.search),
+    isFulfilled: () => {
+        return !isLegacyParams(window?.location?.search)
+    },
     next: () => {
         return initiateUrlParsing
     },
 }
 
 const configLoaded: AppState = {
     name: AppStateNames.ConfigLoaded,
-    isFulfilled: () => true, // there's always a topic set, so no need to check if topicStore.current is defined
+    isFulfilled: () => {
+        // When initializing the config, we could run into issues where the URL parser was active while
+        // the app was setting the default background, writing the topic default background layer over the URL
+        // parameter. This check ensure the topics have set what they need to before we activate the URL sync tool
+        const topicsStore = useTopicsStore()
+        const layerStore = useLayersStore()
+        return topicsStore.currentTopic?.defaultBackgroundLayer?.id === layerStore.currentBackgroundLayerId
+    },
     next: () => {
         if (isLegacyParams(window?.location?.search)) {
             return parseLegacyUrlParams

packages/viewer/src/store/plugins/storeSync/params/bgLayer.param.ts

@@ -34,7 +34,7 @@ const backgroundLayerParamConfig = new UrlParamConfig<string>({
             queryValue,
             !!queryValue &&
                 (queryValue === 'void' ||
-                    useLayersStore().backgroundLayers?.some((layer) => layer.id == queryValue)),
+                    useLayersStore().backgroundLayers?.some((layer) => layer.id === queryValue)),
             'bgLayer'
         ),
 })