fix(panel): adds transition to prevent watched/collected flicker

Author: dvcol

src/components/views/panel/MoviePanelDetails.vue

@@ -170,45 +170,47 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
       />
     </NFlex>
 
-    <NFlex v-if="watchedDate" class="row" size="large">
+    <NFlex class="row hidden" :class="{ show: watchedDate }" size="large">
       <!--  Watched Date  -->
       <TextField
         :label="i18n('watched')"
-        :value="watchedDate.toLocaleDateString()"
+        :value="watchedDate?.toLocaleDateString() ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
 
       <!--  watched time  -->
       <TextField
-        v-if="watchedTime"
         :label="i18n('watched_time')"
-        :value="watchedTime"
+        :value="watchedTime ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
     </NFlex>
 
-    <NFlex v-if="collectionDate" class="row" size="large">
+    <NFlex class="row hidden" :class="{ show: collectionDate }" size="large">
       <!--  Collection Date  -->
       <TextField
         :label="i18n('collected')"
-        :value="collectionDate.toLocaleDateString()"
+        :value="collectionDate?.toLocaleDateString() ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
 
       <!--  Collection time  -->
       <TextField
-        v-if="collectionTime"
         :label="i18n('collected_time')"
-        :value="collectionTime"
+        :value="collectionTime ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
     </NFlex>
   </NFlex>
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
+
 .container,
 .row {
+  @include mixin.transition-show-hide-height;
+
   flex: 1 1 auto;
   width: 100%;
 }

src/components/views/panel/ShowPanelDetails.vue

@@ -98,7 +98,7 @@ const runtime = computed(() => {
 
 const watchedDate = computed(() => {
   if (!watchedProgress?.value?.date) return;
-  return watchedProgress.value.date;
+  return watchedProgress.value.date.toLocaleDateString();
 });
 
 const watchedTime = computed(() => {
@@ -108,7 +108,7 @@ const watchedTime = computed(() => {
 
 const collectionDate = computed(() => {
   if (!collectionProgress?.value?.date) return;
-  return collectionProgress.value.date;
+  return collectionProgress.value.date.toLocaleDateString();
 });
 
 const collectionTime = computed(() => {
@@ -298,45 +298,47 @@ const title = computed(() =>
       />
     </NFlex>
 
-    <NFlex v-if="watchedDate" class="row" size="large">
+    <NFlex class="row hidden" :class="{ show: watchedDate }" size="large">
       <!--  Watched Date  -->
       <TextField
         :label="i18n('watched')"
-        :value="watchedDate.toLocaleDateString()"
+        :value="watchedDate ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
 
       <!--  watched time  -->
       <TextField
-        v-if="watchedTime"
         :label="i18n('watched_time')"
-        :value="watchedTime"
+        :value="watchedTime ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
     </NFlex>
 
-    <NFlex v-if="collectionDate" class="row" size="large">
+    <NFlex class="row hidden" :class="{ show: collectionDate }" size="large">
       <!--  Collection Date  -->
       <TextField
         :label="i18n('collected')"
-        :value="collectionDate.toLocaleDateString()"
+        :value="collectionDate ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
 
       <!--  Collection time  -->
       <TextField
-        v-if="collectionTime"
         :label="i18n('collected_time')"
-        :value="collectionTime"
+        :value="collectionTime ?? '-'"
         :skeleton="{ width: '5.125rem' }"
       />
     </NFlex>
   </NFlex>
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
+
 .container,
 .row {
+  @include mixin.transition-show-hide-height;
+
   flex: 1 1 auto;
   width: 100%;
 }

src/styles/mixin.scss

@@ -58,4 +58,31 @@
   &:hover {
     box-shadow: $box-shadow;
   }
+}
+
+@mixin transition-show-hide-height($transition: var(--n-bezier), $padding: 12px) {
+  &.hidden {
+    max-height: 0;
+    margin-top: -#{$padding};
+    overflow: hidden;
+    opacity: 0;
+    transition:
+            scale 0.5s $transition,
+            opacity 0.5s $transition,
+            max-height 0.25s $transition,
+            margin-top 0.5s $transition;
+    scale: 0.95;
+
+    &.show {
+      max-height: 100dvh;
+      margin-top: initial;
+      opacity: 1;
+      transition:
+              scale 0.5s $transition,
+              opacity 0.5s $transition,
+              max-height 0.25s $transition,
+              margin-top 0.25s $transition;
+      scale: 1;
+    }
+  }
 }

src/styles/transition.scss

@@ -34,19 +34,21 @@
 
 
 @mixin height(
-  $height: 20rem,
-  $opacity: 0,
+  $height: 100%,
+  $opacity: 1,
   $transition: 0.25s ease
 ) {
-  .scale-enter-active,
-  .scale-leave-active {
-    transition: all $transition;
+  .height-enter-active,
+  .height-leave-active {
+    max-height: $height;
+    opacity: $opacity;
+    transition: max-height $transition, opacity $transition;
     will-change: transform, opacity;
   }
 
-  .scale-enter-from,
-  .scale-leave-to {
-    max-height: $height;
-    opacity: $opacity;
+  .height-enter-from,
+  .height-leave-to {
+    max-height: 0;
+    opacity: 0;
   }
 }