⚡ Improve many episodes and webtoons loading

components/utils/VisibilityObserver.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {ref, onMounted, onUnmounted} from "vue";
+
+const emit = defineEmits(["on-display"]);
+
+const element = ref(null);
+let hasIntersected = false;
+
+function handleIntersect(entries: any[]){
+    entries.forEach(entry => {
+        if (entry.isIntersecting && !hasIntersected){
+            hasIntersected = true;
+            emit("on-display");
+            if (observer && element.value){
+                observer.unobserve(element.value);
+            }
+        }
+    });
+}
+
+let observer: any;
+
+onMounted(() => {
+    observer = new IntersectionObserver(handleIntersect, {
+        threshold: 0,
+    });
+
+    if (element.value)
+        observer.observe(element.value);
+});
+
+onUnmounted(() => {
+    if (element.value)
+        observer.unobserve(element.value);
+});
+</script>
+
+<template>
+    <div ref="element">
+        <slot/>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

components/webtoons/episodes/EpisodeList.vue

@@ -4,9 +4,11 @@ import {getEpisodes, getWebtoon} from "~/utils/api";
 import EpisodeItem from "~/components/webtoons/episodes/EpisodeItem.vue";
 import {Skeleton} from "~/components/ui/skeleton";
 import EpisodeSkeleton from "~/components/webtoons/episodes/EpisodeSkeleton.vue";
+import VisibilityObserver from "~/components/utils/VisibilityObserver.vue";
 
 const title = ref("");
 const episodes = ref<any[]>([]);
+const maxIndex = ref<number>(30);
 
 const id = useRoute().params.id as any as number;
 
@@ -22,6 +24,10 @@ function loadTitle(){
     });
 }
 
+function increaseMaxIndex(){
+    maxIndex.value += 30;
+}
+
 onMounted(() => {
     loadTitle();
     loadEpisodes();
@@ -42,8 +48,11 @@ onMounted(() => {
                     <Separator/>
                 </div>
             </div>
-            <div v-for="episode in episodes" :key="episode.id">
-                <EpisodeItem :episode="episode"/>
+            <div v-for="episode in episodes.slice(0, maxIndex)" :key="episode.id">
+                <EpisodeItem v-if="episodes.indexOf(episode) < maxIndex - 1" :episode="episode"/>
+                <VisibilityObserver v-else @on-display="increaseMaxIndex">
+                    <EpisodeItem :episode="episode"/>
+                </VisibilityObserver>
                 <Separator/>
             </div>
         </div>

components/webtoons/webtoons/WebtoonList.vue

@@ -3,14 +3,20 @@ import {ref, computed, onMounted} from "vue";
 import {getWebtoons} from "~/utils/api";
 import WebtoonItem from "~/components/webtoons/webtoons/WebtoonItem.vue";
 import WebtoonSkeleton from "~/components/webtoons/webtoons/WebtoonSkeleton.vue";
+import VisibilityObserver from "~/components/utils/VisibilityObserver.vue";
 
 const search = ref("");
 const webtoons = ref<any[]>([]);
+const maxIndex = ref<number>(30);
 
 function clearSearch(){
     search.value = "";
 }
 
+function increaseMaxIndex(){
+    maxIndex.value += 30;
+}
+
 onMounted(async() => {
     const response = await getWebtoons();
     webtoons.value = response.data;
@@ -52,8 +58,11 @@ const filteredWebtoons = computed(() => {
                     <Separator/>
                 </div>
             </div>
-            <div v-for="webtoon in filteredWebtoons" :key="webtoon.id">
-                <WebtoonItem :webtoon="webtoon"/>
+            <div v-for="webtoon in filteredWebtoons.slice(0, maxIndex)" :key="webtoon.id">
+                <WebtoonItem v-if="filteredWebtoons.indexOf(webtoon) < maxIndex - 1" :webtoon="webtoon"/>
+                <VisibilityObserver v-else @on-display="increaseMaxIndex">
+                    <WebtoonItem :webtoon="webtoon"/>
+                </VisibilityObserver>
                 <Separator/>
             </div>
         </div>