configurable message unload behaviour

slatinsky · Nov 1, 2022 · 0144318 · 0144318
1 parent 965cbdd
commit 0144318
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { nameRenderer, timestampFormat, developerMode, theme, online, linkHandler } from './settingsStore';
+	import { nameRenderer, timestampFormat, developerMode, theme, online, linkHandler, unloadMessages } from './settingsStore';
 	import { timestampRenderers } from './time';
 
 	let testDate = '2020-09-16T11:04:47.215+00:00';
@@ -80,7 +80,7 @@
 	</label>
 	<label>
 		<input type="radio" name="online" value={true} bind:group={$online} />
-		<span>If local assets doesn't exist</span>
+		<span>If local assets don't exist</span>
 	</label>
 	{/key}
 </div>
@@ -103,6 +103,20 @@
 	{/key}
 </div>
 
+<p>Unload messages that are not visible?</p>
+<div class="radios">
+	{#key $unloadMessages}
+	<label>
+		<input type="radio" name="unloadMessages" value={true} bind:group={$unloadMessages} />
+		<span>Yes (uses less RAM)</span>
+	</label>
+	<label>
+		<input type="radio" name="unloadMessages" value={false} bind:group={$unloadMessages} />
+		<span>No (fixes messages going up and down in some browsers while scrolling, but browser may be laggy if you scroll long enough)</span>
+	</label>
+	{/key}
+</div>
+
 <style>
 	.title {
 		font-size: 28px;

diff --git a/src/routes/channels/[guildId]/[channelId]/Message.svelte b/src/routes/channels/[guildId]/[channelId]/Message.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { nameRenderer, online, linkHandler } from '../../../settingsStore';
+	import { nameRenderer, linkHandler, unloadMessages } from '../../../settingsStore';
 	import { onMount, onDestroy } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import MessageMarkdown from './MessageMarkdown.svelte';
@@ -79,12 +79,17 @@
 
 	onMount(() => {
 		observer.observe(root);
-		unloadObserver.observe(root);
+		if ($unloadMessages) {
+			console.log("unloading messages");
+			unloadObserver.observe(root);
+		}
 	});
 
 	onDestroy(() => {
 		observer.disconnect();
-		unloadObserver.disconnect();
+		if ($unloadMessages) {
+			unloadObserver.disconnect();
+		}
 	});
 
 

diff --git a/src/routes/settingsStore.ts b/src/routes/settingsStore.ts
@@ -7,6 +7,7 @@ export const developerMode = writable(false);
 export const theme = writable("dark");
 export const online = writable(false);
 export const linkHandler = writable("app");
+export const unloadMessages = writable(false);
 
 function withLocalStorage(store, localstorageKey: string, type = "string") {
     const restoredValue = localStorage.getItem(localstorageKey);
@@ -34,4 +35,5 @@ withLocalStorage(developerMode, "developerMode", "bool");
 withLocalStorage(theme, "theme", "string");
 withLocalStorage(online, "online", "bool");
 withLocalStorage(linkHandler, "linkHandler", "string");
+withLocalStorage(unloadMessages, "unloadMessages", "bool");