Création et gestion de l'observer pour le défilement infini.

 <script lang="ts" setup>
 <script lang="ts" setup>
 //#region --import--.
 //#region --import--.
 import SearchBar from "~/components/SearchBar.vue";
 import SearchBar from "~/components/SearchBar.vue";
-import { ref } from "vue";
+import { onBeforeUnmount, ref } from "vue";
 import { useTMDB } from "~/composables/tMDB";
 import { useTMDB } from "~/composables/tMDB";
 import { Movie } from "~/models/movie";
 import { Movie } from "~/models/movie";
 import { FilmIcon } from "lucide-vue-next";
 import { FilmIcon } from "lucide-vue-next";
@@ -18,6 +18,10 @@ const isInitialLoading = ref(true);
 const isLoadingMore = ref(false);
 const isLoadingMore = ref(false);
 const currentPage = ref(1);
 const currentPage = ref(1);
 const totalPages = ref(0);
 const totalPages = ref(0);
+/** Elément observé pour le défilement infini. */
+const loadMoreTrigger = ref<HTMLElement | null>(null);
+/** Instance de IntersectionObserver */
+const observer = ref<IntersectionObserver | null>(null);
 //#endregion
 //#endregion
 
 
 //#region --Computed--.
 //#region --Computed--.
@@ -47,12 +51,41 @@ const fetchMovies = async (page: number) => {
     isLoadingMore.value = false;
     isLoadingMore.value = false;
   }
   }
 };
 };
+
+function createIntersectionObserver() {
+  return new IntersectionObserver(
+    (entries) => {
+      const [entry] = entries;
+      if (entry.isIntersecting && !isLoadingMore.value && currentPage.value < totalPages.value) {
+        fetchMovies(currentPage.value + 1);
+      }
+    },
+    { threshold: 1.0 },
+  );
+}
 //#endregion
 //#endregion
 
 
 //#region --Global event--.
 //#region --Global event--.
 onMounted(() => {
 onMounted(() => {
   // Chargement des premiers films.
   // Chargement des premiers films.
   fetchMovies(1);
   fetchMovies(1);
+  // Création et stockage dans la ref de l'instance IntersectionObserver.
+  observer.value = createIntersectionObserver();
+  if (loadMoreTrigger.value) {
+    // Début d'observation de la div pour le défilement infini.
+    observer.value.observe(loadMoreTrigger.value);
+  }
+
+  if (loadMoreTrigger.value) {
+    observer.value.observe(loadMoreTrigger.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  // Disconnect the observer when the component is unmounted
+  if (observer.value) {
+    observer.value.disconnect();
+  }
 });
 });
 //#endregion
 //#endregion
 </script>
 </script>
@@ -94,6 +127,9 @@ onMounted(() => {
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
+
+    <!-- Élément observé pour le défilement infini -->
+    <div ref="loadMoreTrigger" class="h-10 mt-4"/>
   </section>
   </section>
 </template>
 </template>