trying to solve home page memory issue

package.json

@@ -20,6 +20,7 @@
 		"@types/node": "^20.6.0",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
+		"@vitejs/plugin-basic-ssl": "^1.0.1",
 		"autoprefixer": "^10.4.15",
 		"eslint": "^8.48.0",
 		"eslint-config-prettier": "^8.10.0",

src/lib/components/footer.svelte

@@ -0,0 +1,13 @@
+<script>
+    import * as Card from '$lib/components/ui/card'
+</script>
+
+<div class="m-auto px-2 md:px-12 lg:px-14">
+    <Card.Root class="border-b-0 py-4 rounded-b-none">
+        <div class="grid grid-cols-1 md:grid-cols-3">
+            <div class="">
+
+            </div>
+        </div>
+    </Card.Root>
+</div>

src/lib/components/home-manga-card.svelte

@@ -1,56 +1,31 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { slide } from 'svelte/transition';
-	import { Clock3, Heart } from 'lucide-svelte';
-	import * as Card from '$lib/components/ui/card';
-	import { Badge } from '$lib/components/ui/badge';
-	import { Button } from '$lib//components/ui/button';
-	import { formatDistanceToNowStrict } from 'date-fns';
 	import FavMangaDBWorker from "$lib/workers/favouriteManga?worker"
-	import LastReadChapterDBWorker from "$lib/workers/lastReadMangaChapter?worker"
+	import { formatDistanceToNowStrict } from 'date-fns';
+	import { Button } from '$lib//components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import * as Card from '$lib/components/ui/card';
+	import { Clock3, Heart } from 'lucide-svelte';
+	import { slide } from 'svelte/transition';
+	import { onMount } from 'svelte';
 
 	export let manga: any;
 	export let newChapters: any;
-	let favMangaWorker: Worker;
-	let lastReadChapterWorker: Worker;
+	export let haveReadHistory: any;
+	export let isFavorite: any;
 
-	let haveReadHistory: any;
-	let isFavorite: any;
+	let favMangaWorker: Worker;
 
 	onMount(async () => {
 		favMangaWorker = new FavMangaDBWorker();
-		lastReadChapterWorker = new LastReadChapterDBWorker();
-		favMangaWorker.postMessage({
-			type: 'get',
-			payload: {
-				id: manga.id.toString()
-			}
-		});
-
-		lastReadChapterWorker.postMessage({
-			type: 'get',
-			payload: {
-				id: manga.id.toString()
-			}
-		});
 
 		favMangaWorker.onmessage = (e: any) => {
 			const {type, payload} = e.data;
 			if (type === 'get') {
 				isFavorite = payload.manga
 			}
-		};
-
-		lastReadChapterWorker.onmessage = (e: any) => {
-			const {type, payload} = e.data;
-			if (type === 'get') {
-				haveReadHistory = payload.manga
-			}
 		}
 	});
 
-
-	$: chapterNumbers = newChapters.chapters.map((chapter: any) => parseInt(chapter.chapter_number));
 	$: mainBorder = isFavorite ? 'border-rose-800' : haveReadHistory ? 'border-green-500' : '';
 
 	const addToFavorites = async (e: any) => {

src/lib/components/index.ts

@@ -6,3 +6,4 @@ export { default as Navbar } from './navbar.svelte';
 export { default as BackToTop } from './back-to-top.svelte';
 export { default as MangaChapterList } from './manga-chapter-list.svelte';
 export {default as MangaSearch} from './home-search-component.svelte'
+export {default as Footer } from './footer.svelte'

src/lib/workers/favouriteManga.ts

@@ -3,14 +3,6 @@ import {db} from "$lib/db";
 onmessage = async (e) => {
     const {type, payload} = e.data;
 
-    if (type === 'add') {
-        db.favouriteManga.add(payload)
-    }
-
-    if (type === 'put') {
-        db.favouriteManga.put(payload)
-    }
-
     if (type === 'get') {
         const payloadData = await db.favouriteManga.get(payload.id);
         postMessage({
@@ -19,7 +11,27 @@ onmessage = async (e) => {
         })
     }
 
+    if ( type === 'bulk' ) {
+        const payloadData = new Map()
+        const allFavManga = await db.favouriteManga.each( (manga) => {
+            payloadData.set(manga.id, manga)
+        });
+
+        postMessage({
+            type,
+            payload: payloadData
+        })
+    }
+
+    if (type === 'add') {
+        db.favouriteManga.add(payload)
+    }
+
+    if (type === 'put') {
+        db.favouriteManga.put(payload)
+    }
+
     if (type === 'delete') {
-        await db.favouriteManga.delete(payload.id)
+        db.favouriteManga.delete(payload.id)
     }
 };

src/lib/workers/lastReadMangaChapter.ts

@@ -3,14 +3,6 @@ import {db} from "$lib/db";
 onmessage = async (e) => {
     const {type, payload} = e.data;
 
-    if (type === 'add') {
-        db.lastReadMangaChapter.add(payload)
-    }
-
-    if (type === 'put') {
-        db.lastReadMangaChapter.put(payload)
-    }
-
     if (type === 'get') {
         const payloadData = await db.lastReadMangaChapter.get(payload.id)
         postMessage({
@@ -19,6 +11,26 @@ onmessage = async (e) => {
         })
     }
 
+    if ( type === 'bulk' ) {
+        const payloadData = new Map();
+        const allReadHistory = await db.lastReadMangaChapter.each( (manga) => {
+            payloadData.set(manga.id, manga)
+        });
+
+        postMessage({
+            type,
+            payload: payloadData
+        })
+    }
+
+    if (type === 'add') {
+        db.lastReadMangaChapter.add(payload)
+    }
+
+    if (type === 'put') {
+        db.lastReadMangaChapter.put(payload)
+    }
+
     if (type === 'delete') {
         await db.lastReadMangaChapter.delete(payload.id)
     }

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
 	import { fade, fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { partytownSnippet } from '@builder.io/partytown/integration';
-	import { BackToTop } from '$lib/components';
+	import {BackToTop, Footer} from '$lib/components';
 
 	let path: string;
 
@@ -56,5 +56,6 @@
 			</div>
 		{/key}
 	</div>
+	<Footer />
 	<BackToTop />
 </div>

src/routes/home/+page.svelte

@@ -1,22 +1,60 @@
 <script lang="ts">
+	import LastReadChapterDBWorker from "$lib/workers/lastReadMangaChapter?worker"
 	import { Squirrel, ArrowDownToLine, Loader, ShieldCheck } from 'lucide-svelte';
-	import type { PageServerData } from './$types';
+	import FavMangaDBWorker from "$lib/workers/favouriteManga?worker"
+	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import * as Tabs from '$lib/components/ui/tabs';
-	import { Button } from '$lib/components/ui/button';
+	import type { PageServerData } from './$types';
+	import {onMount} from "svelte";
 	import {
 		HomePageMangaViewCard, MangaSearch,
 		TopChaptersListViewCard,
 		TopMangaListViewCard
 	} from '$lib/components';
 
 	export let data: PageServerData;
+
+	let favMangaWorker: Worker;
+	let lastReadChapterWorker: Worker;
+	let favMangas: Map<string, any>;
+	let userReadHistory: Map<string, any>;
+
 	let loadingMoreLatestManga = false;
 
 	let latestMangaList = data.home.latest;
 	let currentMangaList = latestMangaList.slice(0, 30);
 	let remainingMangaList = latestMangaList.slice(30);
 
+	onMount(async () => {
+		favMangaWorker = new FavMangaDBWorker();
+		lastReadChapterWorker = new LastReadChapterDBWorker();
+
+		favMangaWorker.postMessage({
+			type: 'bulk',
+			payload: {}
+		});
+
+		lastReadChapterWorker.postMessage({
+			type: 'bulk',
+			payload: {}
+		});
+
+		favMangaWorker.onmessage = (e: any) => {
+			const {type, payload} = e.data;
+			if (type === 'bulk') {
+				favMangas = payload
+			}
+		};
+
+		lastReadChapterWorker.onmessage = (e: any) => {
+			const {type, payload} = e.data;
+			if (type === 'bulk') {
+				userReadHistory = payload
+			}
+		};
+	});
+
 	const loadMoreLatestManga = async () => {
 		loadingMoreLatestManga = true;
 		if (latestMangaList.length < 150) {
@@ -65,7 +103,9 @@
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
 							{#each currentMangaList as manga}
 								{@const newChapters = JSON.parse(manga['new_chapters'])}
-								<HomePageMangaViewCard {manga} {newChapters} />
+								{@const isFavorite = favMangas ? favMangas.get(manga['id'].toString()) : false}
+								{@const haveReadHistory = userReadHistory ? userReadHistory.get(manga['id'].toString()): false}
+								<HomePageMangaViewCard {haveReadHistory} {isFavorite} {manga} {newChapters} />
 							{/each}
 						</div>
 					{/if}

vite.config.ts

@@ -2,6 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { join } from 'path';
 import { defineConfig } from 'vite';
 import { partytownVite } from '@builder.io/partytown/utils';
+import basicSsl from '@vitejs/plugin-basic-ssl'
 
 export default defineConfig({
 	plugins: [