itube-specs 0.0.621 → 0.0.623

package/components/grids/s-grid-videos.vue

@@ -7,7 +7,7 @@
   >
     <slot name="grid-start" />
     <FVideoCard
-        v-for="(item, index) in items"
+        v-for="(item, index) in eagerItems"
         :key="`video-${item.guid}`"
         class="s-grid-videos__card"
         :card="item"
@@ -17,14 +17,31 @@
         :playlist-id="playlistId"
         :playlist="playlist"
     />
-    <slot name="grid-end" />
     <slot/>
+    <NuxtLazyHydrate when-visible v-if="lazyItems.length > 0">
+      <div class="s-grid-videos__lazy">
+        <FVideoCard
+            v-for="item in lazyItems"
+            :key="`video-lazy-${item.guid}`"
+            class="s-grid-videos__card"
+            :card="item"
+            loading="lazy"
+            :top-chips="topChips"
+            :playlist-id="playlistId"
+            :playlist="playlist"
+        />
+      </div>
+    </NuxtLazyHydrate>
+    <slot name="grid-end" />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../types';
-defineProps<{
+
+const EAGER_COUNT = 12;
+
+const props = defineProps<{
   items: Array<IVideoCard>
   hideFirstRow?: boolean
   priority?: boolean
@@ -33,4 +50,7 @@ defineProps<{
   playlistId?: string
   topChips?: string[]
 }>()
+
+const eagerItems = computed(() => props.items.slice(0, EAGER_COUNT));
+const lazyItems = computed(() => props.items.slice(EAGER_COUNT));
 </script>

package/composables/use-navigation-items.ts

@@ -1,9 +1,8 @@
 import { FeatureFlags } from '~/config/featureFlags.config';
 
 export function useNavigationItems() {
-    const { favoritesLink } = useFavorites();
     const navigationItems = computed(() => {
-        const favLink = favoritesLink.value ?? '';
+        const favLink = '/favorites';
 
         return [
             {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.621",
+  "version": "0.0.623",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {