From f86ab0f41b0ff33923ed7805fa7742e00a788cdc Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Sat, 7 Feb 2026 07:35:21 +0100
Subject: [PATCH] more performance enhancement

---
 public/healthz.json                           |  4 +-
 .../content/MarkdownRenderer.svelte           | 63 +++++++++++--
 src/lib/components/layout/Header.svelte       |  1 +
 src/lib/modules/feed/FeedPage.svelte          | 69 +++++++++++++--
 src/lib/services/cache/event-cache.ts         | 11 +--
 src/lib/services/cache/indexeddb-store.ts     | 18 +++-
 src/lib/services/cache/markdown-cache.ts      | 88 +++++++++++++++++++
 vite.config.ts                                | 40 ++++++++-
 8 files changed, 268 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/services/cache/markdown-cache.ts

diff --git a/public/healthz.json b/public/healthz.json
index 9f7326d..f428507 100644
--- a/public/healthz.json
+++ b/public/healthz.json
@@ -2,7 +2,7 @@
   "status": "ok",
   "service": "aitherboard",
   "version": "0.2.0",
-  "buildTime": "2026-02-07T06:20:23.861Z",
+  "buildTime": "2026-02-07T06:35:08.691Z",
   "gitCommit": "unknown",
-  "timestamp": 1770445223861
+  "timestamp": 1770446108691
 }
\ No newline at end of file
diff --git a/src/lib/components/content/MarkdownRenderer.svelte b/src/lib/components/content/MarkdownRenderer.svelte
index a33a07f..04fcafe 100644
--- a/src/lib/components/content/MarkdownRenderer.svelte
+++ b/src/lib/components/content/MarkdownRenderer.svelte
@@ -13,6 +13,7 @@
   import hljs from 'highlight.js';
   // Use VS Code theme for IDE-like appearance
   import 'highlight.js/styles/vs2015.css';
+  import { getCachedMarkdown, cacheMarkdown } from '../../services/cache/markdown-cache.js';
   
   import EmbeddedEvent from './EmbeddedEvent.svelte';
   let mountingEmbeddedEvents = $state(false); // Guard for mounting
@@ -582,16 +583,34 @@
   }
 
   // Render markdown or AsciiDoc to HTML
-  function renderMarkdown(text: string): string {
+  async function renderMarkdown(text: string): Promise<string> {
     if (!content) return '';
     
-    // Check cache first
-    const cached = markdownCache.get(content);
+    // Ensure content is defined (TypeScript narrowing)
+    const contentToRender: string = content;
+    
+    // Check IndexedDB cache first (persistent)
+    const cachedFromDB = await getCachedMarkdown(contentToRender);
+    if (cachedFromDB) {
+      // Also update in-memory cache for faster subsequent access
+      if (markdownCache.size >= MAX_CACHE_SIZE) {
+        // Remove oldest entry (simple FIFO)
+        const firstKey = markdownCache.keys().next().value;
+        if (firstKey !== undefined) {
+          markdownCache.delete(firstKey);
+        }
+      }
+      markdownCache.set(contentToRender, cachedFromDB);
+      return cachedFromDB;
+    }
+    
+    // Check in-memory cache (faster for same session)
+    const cached = markdownCache.get(contentToRender);
     if (cached !== undefined) {
       return cached;
     }
     
-    const processed = processContent(content);
+    const processed = processContent(contentToRender);
 
     let html: string;
     
@@ -752,12 +771,44 @@
         markdownCache.delete(firstKey);
       }
     }
-    markdownCache.set(content, sanitized);
+    markdownCache.set(contentToRender, sanitized);
+    
+    // Cache in IndexedDB asynchronously (don't await to avoid blocking)
+    cacheMarkdown(contentToRender, sanitized).catch(err => {
+      console.debug('Failed to cache markdown in IndexedDB:', err);
+    });
     
     return sanitized;
   }
 
-  const renderedHtml = $derived(renderMarkdown(content));
+  // Rendered HTML state (async rendering with cache)
+  let renderedHtml = $state<string>('');
+
+  // Render markdown when content changes (with async cache support)
+  $effect(() => {
+    if (!content) {
+      renderedHtml = '';
+      return;
+    }
+    
+    // Start with in-memory cache for instant display
+    const cached = markdownCache.get(content);
+    if (cached) {
+      renderedHtml = cached;
+    }
+    
+    // Then check IndexedDB and re-render if needed (only if content is defined)
+    if (content) {
+      renderMarkdown(content).then(html => {
+      if (html !== renderedHtml) {
+        renderedHtml = html;
+      }
+    }).catch(err => {
+        console.error('Error rendering markdown:', err);
+        renderedHtml = content || ''; // Fallback to raw content
+      });
+    }
+  });
 
   // Mount ProfileBadge components after rendering
   function mountProfileBadges() {
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
index 7412a87..5cb53d7 100644
--- a/src/lib/components/layout/Header.svelte
+++ b/src/lib/components/layout/Header.svelte
@@ -41,6 +41,7 @@
         class="w-full h-full object-cover object-center opacity-90 dark:opacity-70"
         style="object-position: center;"
         loading="eager"
+        fetchpriority="high"
       />
       <!-- Overlay gradient for text readability -->
       <div class="absolute inset-0 bg-gradient-to-b from-fog-bg/30 to-fog-bg/80 dark:from-fog-dark-bg/40 dark:to-fog-dark-bg/90 pointer-events-none"></div>
diff --git a/src/lib/modules/feed/FeedPage.svelte b/src/lib/modules/feed/FeedPage.svelte
index 3a4e78b..7827100 100644
--- a/src/lib/modules/feed/FeedPage.svelte
+++ b/src/lib/modules/feed/FeedPage.svelte
@@ -43,6 +43,28 @@
   // Preloaded referenced events (e, a, q tags) - eventId -> referenced event
   let preloadedReferencedEvents = $state<Map<string, NostrEvent>>(new Map());
   
+  // Virtual scrolling for performance
+  let Virtualizer: any = $state(null);
+  let virtualizerLoading = $state(false);
+  let virtualizerContainer = $state<HTMLElement | null>(null);
+  
+  async function loadVirtualizer() {
+    if (Virtualizer) return Virtualizer;
+    if (virtualizerLoading) return null;
+    
+    virtualizerLoading = true;
+    try {
+      const module = await import('@tanstack/svelte-virtual');
+      Virtualizer = module.Virtualizer;
+      return Virtualizer;
+    } catch (error) {
+      console.error('Failed to load virtual scrolling:', error);
+      return null;
+    } finally {
+      virtualizerLoading = false;
+    }
+  }
+  
   // Filtered events based on filterResult
   let filteredEvents = $derived.by(() => {
     if (!filterResult.value) {
@@ -454,6 +476,9 @@
     isMounted = true;
     loadInProgress = false;
     
+    // Load virtualizer for better performance with large feeds
+    loadVirtualizer();
+    
     // Use a small delay to ensure previous page cleanup completes
     const initTimeout = setTimeout(() => {
       if (!isMounted) return;
@@ -472,7 +497,8 @@
     // Register j/k navigation shortcuts
     if (browser) {
       const unregisterJ = keyboardShortcuts.register('j', (e) => {
-        if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA' || document.activeElement?.isContentEditable) {
+        const activeElement = document.activeElement as HTMLElement | null;
+        if (activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA' || activeElement?.isContentEditable) {
           return; // Don't interfere with typing
         }
         e.preventDefault();
@@ -481,7 +507,8 @@
       });
       
       const unregisterK = keyboardShortcuts.register('k', (e) => {
-        if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA' || document.activeElement?.isContentEditable) {
+        const activeElement = document.activeElement as HTMLElement | null;
+        if (activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA' || activeElement?.isContentEditable) {
           return; // Don't interfere with typing
         }
         e.preventDefault();
@@ -555,12 +582,34 @@
       <p class="text-fog-text dark:text-fog-dark-text">No posts found.</p>
     </div>
   {:else}
-    <div class="feed-posts">
-      {#each events as event (event.id)}
-        {@const referencedEvent = getReferencedEventForPost(event)}
-        <FeedPost post={event} preloadedReferencedEvent={referencedEvent} />
-      {/each}
-    </div>
+    {#if Virtualizer && events.length > 50}
+      <!-- Use virtual scrolling for large feeds (50+ items) -->
+      {@const V = Virtualizer}
+      <div bind:this={virtualizerContainer} class="feed-posts virtual-scroll-container" style="height: 80vh; overflow: auto;">
+        <V
+          count={events.length}
+          getScrollElement={() => virtualizerContainer}
+          estimateSize={() => 300}
+          overscan={5}
+        >
+          {#each Array(events.length) as _, i}
+            {@const event = events[i]}
+            {@const referencedEvent = getReferencedEventForPost(event)}
+            <div data-post-id={event.id}>
+              <FeedPost post={event} preloadedReferencedEvent={referencedEvent} />
+            </div>
+          {/each}
+        </V>
+      </div>
+    {:else}
+      <!-- Fallback to regular rendering for small feeds or when virtualizer not loaded -->
+      <div class="feed-posts">
+        {#each events as event (event.id)}
+          {@const referencedEvent = getReferencedEventForPost(event)}
+          <FeedPost post={event} preloadedReferencedEvent={referencedEvent} />
+        {/each}
+      </div>
+    {/if}
     
     <div class="load-more-section">
       <button
@@ -601,6 +650,10 @@
     flex-direction: column;
     gap: 1rem;
   }
+  
+  .virtual-scroll-container {
+    position: relative;
+  }
 
   .relay-info {
     margin-bottom: 1.5rem;
diff --git a/src/lib/services/cache/event-cache.ts b/src/lib/services/cache/event-cache.ts
index 94e095b..7d869c4 100644
--- a/src/lib/services/cache/event-cache.ts
+++ b/src/lib/services/cache/event-cache.ts
@@ -58,10 +58,8 @@ export async function cacheEvents(events: NostrEvent[]): Promise<void> {
         cached_at: Date.now()
     }));
     
-    // Put all events in a single batch
-    for (const cached of cachedEvents) {
-      tx.store.put(cached);
-    }
+    // Put all events in a single batch using Promise.all for better performance
+    await Promise.all(cachedEvents.map(cached => tx.store.put(cached)));
     
     // Wait for transaction to complete
     await tx.done;
@@ -146,9 +144,8 @@ export async function deleteEvent(id: string): Promise<void> {
 export async function deleteEvents(ids: string[]): Promise<void> {
   const db = await getDB();
   const tx = db.transaction('events', 'readwrite');
-  for (const id of ids) {
-    await tx.store.delete(id);
-  }
+  // Use Promise.all for batch deletion
+  await Promise.all(ids.map(id => tx.store.delete(id)));
   await tx.done;
 }
 
diff --git a/src/lib/services/cache/indexeddb-store.ts b/src/lib/services/cache/indexeddb-store.ts
index faaec87..0cd1d00 100644
--- a/src/lib/services/cache/indexeddb-store.ts
+++ b/src/lib/services/cache/indexeddb-store.ts
@@ -5,7 +5,7 @@
 import { openDB, type IDBPDatabase } from 'idb';
 
 const DB_NAME = 'aitherboard';
-const DB_VERSION = 7; // Version 6: Removed opengraph store. Version 7: Added RSS cache store
+const DB_VERSION = 8; // Version 7: Added RSS cache store. Version 8: Added markdown cache store
 
 export interface DatabaseSchema {
   events: {
@@ -38,6 +38,11 @@ export interface DatabaseSchema {
     value: unknown;
     indexes: { cached_at: number };
   };
+  markdown: {
+    key: string; // content hash
+    value: unknown;
+    indexes: { cached_at: number };
+  };
 }
 
 let dbInstance: IDBPDatabase<DatabaseSchema> | null = null;
@@ -94,6 +99,12 @@ export async function getDB(): Promise<IDBPDatabase<DatabaseSchema>> {
         const rssStore = db.createObjectStore('rss', { keyPath: 'feedUrl' });
         rssStore.createIndex('cached_at', 'cached_at', { unique: false });
       }
+
+      // Markdown cache store
+      if (!db.objectStoreNames.contains('markdown')) {
+        const markdownStore = db.createObjectStore('markdown', { keyPath: 'hash' });
+        markdownStore.createIndex('cached_at', 'cached_at', { unique: false });
+      }
       },
       blocked() {
         console.warn('IndexedDB is blocked - another tab may have it open');
@@ -114,7 +125,8 @@ export async function getDB(): Promise<IDBPDatabase<DatabaseSchema>> {
         !dbInstance.objectStoreNames.contains('search') ||
         !dbInstance.objectStoreNames.contains('preferences') ||
         !dbInstance.objectStoreNames.contains('drafts') ||
-        !dbInstance.objectStoreNames.contains('rss')) {
+        !dbInstance.objectStoreNames.contains('rss') ||
+        !dbInstance.objectStoreNames.contains('markdown')) {
       // Database is corrupted - close and delete it, then recreate
       console.warn('Database missing required stores, recreating...');
       dbInstance.close();
@@ -148,6 +160,8 @@ export async function getDB(): Promise<IDBPDatabase<DatabaseSchema>> {
           db.createObjectStore('drafts', { keyPath: 'id' });
           const rssStore = db.createObjectStore('rss', { keyPath: 'feedUrl' });
           rssStore.createIndex('cached_at', 'cached_at', { unique: false });
+          const markdownStore = db.createObjectStore('markdown', { keyPath: 'hash' });
+          markdownStore.createIndex('cached_at', 'cached_at', { unique: false });
         },
         blocked() {
           console.warn('IndexedDB is blocked - another tab may have it open');
diff --git a/src/lib/services/cache/markdown-cache.ts b/src/lib/services/cache/markdown-cache.ts
new file mode 100644
index 0000000..47d047c
--- /dev/null
+++ b/src/lib/services/cache/markdown-cache.ts
@@ -0,0 +1,88 @@
+/**
+ * Markdown rendering cache with IndexedDB persistence
+ */
+
+import { getDB } from './indexeddb-store.js';
+
+export interface CachedMarkdown {
+  hash: string;
+  rendered: string;
+  cached_at: number;
+}
+
+/**
+ * Simple hash function for content (djb2 algorithm)
+ */
+function hashContent(content: string): string {
+  let hash = 5381;
+  for (let i = 0; i < content.length; i++) {
+    hash = ((hash << 5) + hash) + content.charCodeAt(i);
+  }
+  return hash.toString(36);
+}
+
+/**
+ * Get cached rendered markdown
+ */
+export async function getCachedMarkdown(content: string): Promise<string | null> {
+  try {
+    const hash = hashContent(content);
+    const db = await getDB();
+    const cached = await db.get('markdown', hash) as CachedMarkdown | undefined;
+    
+    if (cached) {
+      // Check if cache is still valid (30 days TTL)
+      const maxAge = 30 * 24 * 60 * 60 * 1000; // 30 days
+      if (Date.now() - cached.cached_at < maxAge) {
+        return cached.rendered;
+      }
+      // Cache expired, delete it
+      await db.delete('markdown', hash);
+    }
+    
+    return null;
+  } catch (error) {
+    console.debug('Error getting cached markdown:', error);
+    return null;
+  }
+}
+
+/**
+ * Cache rendered markdown
+ */
+export async function cacheMarkdown(content: string, rendered: string): Promise<void> {
+  try {
+    const hash = hashContent(content);
+    const db = await getDB();
+    const cached: CachedMarkdown = {
+      hash,
+      rendered,
+      cached_at: Date.now()
+    };
+    await db.put('markdown', cached);
+  } catch (error) {
+    console.debug('Error caching markdown:', error);
+    // Don't throw - caching failures shouldn't break the app
+  }
+}
+
+/**
+ * Clear old markdown cache entries (older than specified timestamp)
+ */
+export async function clearOldMarkdownCache(olderThan: number): Promise<void> {
+  try {
+    const db = await getDB();
+    const tx = db.transaction('markdown', 'readwrite');
+    const index = tx.store.index('cached_at');
+    
+    for await (const cursor of index.iterate()) {
+      if (cursor.value.cached_at < olderThan) {
+        await cursor.delete();
+      }
+    }
+    
+    await tx.done;
+  } catch (error) {
+    console.debug('Error clearing old markdown cache:', error);
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 2752548..8126cef 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,10 +18,48 @@ export default defineConfig({
             options: {
               cacheName: 'images-cache',
               expiration: {
-                maxEntries: 100,
+                maxEntries: 200,
                 maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
               }
             }
+          },
+          {
+            // Cache API responses (relay responses) with network-first strategy
+            urlPattern: /^wss?:\/\//i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 5 // 5 minutes - short cache for API responses
+              },
+              networkTimeoutSeconds: 3 // Fallback to cache if network is slow
+            }
+          },
+          {
+            // Cache static assets with stale-while-revalidate for better performance
+            urlPattern: /\.(?:js|css|woff|woff2)$/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'static-assets',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
+              }
+            }
+          },
+          {
+            // Cache HTML pages with network-first for freshness
+            urlPattern: /\.html$/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'html-cache',
+              expiration: {
+                maxEntries: 20,
+                maxAgeSeconds: 60 * 60 * 24 // 1 day
+              },
+              networkTimeoutSeconds: 2
+            }
           }
         ]
       },