From 2359541fbf262a2793a40b7f2a6734d4a7adb892 Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Wed, 20 Mar 2024 22:57:48 -0400
Subject: [PATCH] transition elements

---
 src/main.vue               | 14 +++++++++-----
 src/views/gallery-list.vue | 21 ++++++++++++---------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/main.vue b/src/main.vue
index 5118442..e44df6c 100644
--- a/src/main.vue
+++ b/src/main.vue
@@ -97,13 +97,17 @@ onMounted(async () => {
     #main-entry(
       v-if='acknowledged'
     )
-      router-view
-    WarningPrompt(
+      Transition
+        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">
diff --git a/src/views/gallery-list.vue b/src/views/gallery-list.vue
index a38e8f6..cd53887 100644
--- a/src/views/gallery-list.vue
+++ b/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(
-    v-if='ready'
-  )
-    GalleryTile(
-      v-for='(entry, id) in entries'
-      :entry='entry'
-      :id='id'
-      :hideWarnings='hideWarnings'
-      @click='onTileClicked($event)'
+  Transition
+    .gallery(
+      v-if='ready'
     )
+      GalleryTile(
+        v-for='(entry, id) in entries'
+        :entry='entry'
+        :id='id'
+        :hideWarnings='hideWarnings'
+        @click='onTileClicked($event)'
+      )
 </template>
 
 <style scoped lang="sass">