From d7b64ff44779fb8168a3ec27f37f1aa33917653d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 24 Sep 2024 00:27:22 +0200
Subject: [PATCH] enh: infinite scroll messages

---
 src/lib/components/chat/Messages.svelte | 33 ++++++++++++++++++++++---
 src/lib/components/common/Loader.svelte | 22 ++++++++++++++---
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index d342abf7f..d6d2b881a 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -9,6 +9,8 @@
 
 	import Placeholder from './Messages/Placeholder.svelte';
 	import Message from './Messages/Message.svelte';
+	import Loader from '../common/Loader.svelte';
+	import Spinner from '../common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -33,12 +35,21 @@
 	export let bottomPadding = false;
 	export let autoScroll;
 
+	let messagesCount = 20;
+	let messagesLoading = false;
+
+	const loadMoreMessages = async () => {
+		messagesLoading = true;
+		messagesCount += 20;
+		messagesLoading = false;
+	};
+
 	$: if (history.currentId) {
 		let _messages = [];
 
 		let message = history.messages[history.currentId];
-		while (message) {
-			_messages.unshift({ ...message });
+		while (message && _messages.length <= messagesCount) {
+			_messages.push({ ...message });
 			message = message.parentId !== null ? history.messages[message.parentId] : null;
 		}
 
@@ -330,7 +341,7 @@
 	{:else}
 		<div class="w-full pt-2">
 			{#key chatId}
-				<div class="w-full">
+				<div class="w-full flex flex-col-reverse">
 					{#each messages as message, messageIdx (message.id)}
 						<Message
 							{chatId}
@@ -361,6 +372,22 @@
 							}}
 						/>
 					{/each}
+
+					{#if messages.at(-1).parentId !== null}
+						<Loader
+							on:visible={(e) => {
+								console.log('visible');
+								if (!messagesLoading) {
+									loadMoreMessages();
+								}
+							}}
+						>
+							<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
+								<Spinner className=" size-4" />
+								<div class=" ">Loading...</div>
+							</div>
+						</Loader>
+					{/if}
 				</div>
 				<div class="pb-12" />
 				{#if bottomPadding}
diff --git a/src/lib/components/common/Loader.svelte b/src/lib/components/common/Loader.svelte
index 86c415ae4..ac7ecaf28 100644
--- a/src/lib/components/common/Loader.svelte
+++ b/src/lib/components/common/Loader.svelte
@@ -1,16 +1,24 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
 
 	let loaderElement: HTMLElement;
 
+	let observer;
+	let intervalId;
+
 	onMount(() => {
-		const observer = new IntersectionObserver(
+		observer = new IntersectionObserver(
 			(entries, observer) => {
 				entries.forEach((entry) => {
 					if (entry.isIntersecting) {
-						dispatch('visible');
+						intervalId = setInterval(() => {
+							dispatch('visible');
+						}, 100);
+						// dispatch('visible');
 						// observer.unobserve(loaderElement); // Stop observing until content is loaded
+					} else {
+						clearInterval(intervalId);
 					}
 				});
 			},
@@ -23,6 +31,14 @@
 
 		observer.observe(loaderElement);
 	});
+
+	onDestroy(() => {
+		observer.disconnect();
+
+		if (intervalId) {
+			clearInterval(intervalId);
+		}
+	});
 </script>
 
 <div bind:this={loaderElement}>