modified: assets/css/global.css

	modified:   components/Hero.vue
	modified:   components/Listing.vue
	modified:   pages/person/[id].vue
	modified:   pages/search/index.vue

assets/css/global.css

@@ -27,6 +27,16 @@
   opacity: 1;
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .slide-down-enter-active,
 .slide-down-leave-active {
   transition: all 0.2s;

components/Hero.vue

@@ -35,10 +35,12 @@ const backdrop = computed(() => {
     relative top--8 block w-full flex flex-col justify-between overflow-hidden lg:h-md sm:h-lg xl:h-xl dark:bg-black
   >
     <div class="backdrop lg:w-8/11" relative right-0 top-0 w-full lg:ml-auto lg:h-md md:h-xs sm:h-lg xl:h-xl :class="{ 'h-60': !backdrop }">
-      <NuxtImg
-        v-if="backdrop" inline-block
-        h-full w-full object-cover :src="backdrop" :alt="itemObj.name || itemObj.title"
-      />
+      <Transition name="fade">
+        <NuxtImg
+          v-if="backdrop" inline-block loading="lazy"
+          h-full w-full object-cover :src="backdrop" :alt="itemObj.name || itemObj.title"
+        />
+      </Transition>
     </div>
     <div class="lg:w-11/20" lg:absolute lg:bottom-0 lg:left-0 lg:top-0 lg:z-1 lg:h-full lg:flex lg:items-center>
       <div class="md:w-4/6" ml-0 w-full flex flex-col gap-y-6 p-4 md:ml-12 md:p-0>

components/Listing.vue

@@ -37,7 +37,9 @@ onMounted(() => scrollTrigger())
       v-if="items && items.results.length"
       xs:grid-cols-3 grid grid-cols-3 gap-2 lg:grid-cols-5 sm:grid-cols-4 xl:grid-cols-6 md:gap-y-5 sm:gap-y-6
     >
-      <Card v-for="item in items.results" :key="item.id" :item="item" />
+      <TransitionGroup name="fade">
+        <Card v-for="item in items.results" :key="item.id" :item="item" />
+      </TransitionGroup>
     </ul>
 
     <div v-if="items.page < items.total_pages" mt-5>

pages/person/[id].vue

@@ -15,7 +15,10 @@ useHead({
 
 <template>
   <div relative mx-3 my-8 sm:mx-6 xl:mx-38>
-    <PersonInfo :person="person" />
+    <h1 text-4xl font-semibold>
+      Soon ⏳
+    </h1>
+    <!-- <PersonInfo :person="person" /> -->
     <!-- <Images v-if="person?.images.profiles" title="Photos" type="poster" :images="person?.images.profiles" /> -->
   </div>
 </template>

pages/search/index.vue

@@ -68,8 +68,7 @@ useHead({
 <template>
   <main relative my-15 xl:ml-25>
     <Listing
-      v-if="items && items.results.length"
-      sm:mt-25 :items="items" :title="title" :loading="loading"
+      v-if="items && items.results.length" sm:mt-25 :items="items" :title="title" :loading="loading"
       @load-more="loadMore"
     />
   </main>