Keep all condition overlays in the DOM to prevent flickering

src/vue/components/ConditionalLayer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DeepReadonly } from 'ts-essentials';
+import type { Ref } from 'vue';
 
 import { computed } from 'vue';
 
@@ -11,7 +12,7 @@ import { useModelStore } from '../../ts/stores/model';
 import { compile } from '../../ts/util/record-condition';
 
 const props = defineProps<{
-  layerConfig: DeepReadonly<ConditionalLayerConfig>;
+  readonly layerConfig: DeepReadonly<ConditionalLayerConfig>;
 }>();
 
 const { extractAssetPosition, toAssetUrl } = useConfigStore();
@@ -20,34 +21,38 @@ const { record } = useModelStore();
 function compileLayer({ condition, url }: ConditionalLayerConfig): {
   checkCondition: Condition<typeof record>;
   condition: string;
+  active: Ref<boolean>;
   url: URL;
   x: number;
   y: number;
 } {
   const resolvedUrl = toAssetUrl(url);
   const { x, y } = extractAssetPosition(resolvedUrl);
   const checkCondition = compile(condition);
+  const active = computed(() => checkCondition(record));
   return {
     checkCondition,
     condition,
+    active,
     url: resolvedUrl,
     x,
     y,
   };
 }
 
-const compiledLayer = computed(() => compileLayer(props.layerConfig));
+const compiledLayer = compileLayer(props.layerConfig);
 </script>
 
 <template>
   <img
     :src="compiledLayer.url.href"
-    v-if="compiledLayer.checkCondition(record)"
     class="positioned-layer"
+    :class="{ inactive: !compiledLayer.active.value }"
     :style="{
       '--layer-x': compiledLayer.x,
       '--layer-y': compiledLayer.y,
     }"
+    :alt="`${compiledLayer.condition} -> ${compiledLayer.url}`"
   />
 </template>
 
@@ -57,4 +62,8 @@ const compiledLayer = computed(() => compileLayer(props.layerConfig));
   top: calc(1px * var(--layer-y));
   left: calc(1px * var(--layer-x));
 }
+
+.inactive {
+  display: none;
+}
 </style>