transition elements

src/main.vue

@@ -97,13 +97,17 @@ onMounted(async () => {
     #main-entry(
       v-if='acknowledged'
     )
-      router-view
+      Transition
-    WarningPrompt(
+        router-view
+    #main-entry(
       v-else
-      :storageId='storageId'
-      :warning='warning'
-      @acknowledged='onAcknowledgedWarning()'
     )
+      Transition
+        WarningPrompt(
+          :storageId='storageId'
+          :warning='warning'
+          @acknowledged='onAcknowledgedWarning()'
+        )
 </template>
 
 <style scoped lang="sass">

src/views/gallery-list.vue

@@ -31,6 +31,7 @@ const hasWarnings = ref(false)
 const hideWarnings = defineModel('showWarnings', { type: Boolean })
 
 const onDisplayEntries = () => {
+  ready.value = false
   let currentEntries = config.value.entries
   if (!!variants.value) {
     variants.value.forEach((variant) => {
@@ -39,6 +40,7 @@ const onDisplayEntries = () => {
   }
   entries.value = currentEntries
   hasWarnings.value = !!Object.values(entries.value).find(other => !!other.warning)
+  setTimeout(() => ready.value = true)
 }
 
 const onTileClicked = (clickEvent: { event: Event, id: string }) => {
@@ -103,16 +105,17 @@ onMounted(async () => {
         id='warning-toggle-checkbox'
         v-model='hideWarnings'
       )
-  .gallery(
+  Transition
-    v-if='ready'
+    .gallery(
-  )
+      v-if='ready'
-    GalleryTile(
-      v-for='(entry, id) in entries'
-      :entry='entry'
-      :id='id'
-      :hideWarnings='hideWarnings'
-      @click='onTileClicked($event)'
     )
+      GalleryTile(
+        v-for='(entry, id) in entries'
+        :entry='entry'
+        :id='id'
+        :hideWarnings='hideWarnings'
+        @click='onTileClicked($event)'
+      )
 </template>
 
 <style scoped lang="sass">