From 98d3ce4d2f2357b5a2a4fc0caeb9d0401960c42c Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sat, 11 Apr 2026 10:14:24 -0400 Subject: [PATCH] fix(canvas): per-user forgotten shape filtering + lazy loading for perf MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Shapes deleted (forgotten) by a user no longer reappear on reload — forgottenBy[localDID] filtering in #applyDocToDOM and #applyPatchesToDOM means one delete = gone permanently for that user while preserving CRDT data for others. IntersectionObserver on FolkShape base class defers heavy init (API calls, iframes, feed polling) until shapes enter viewport (+500px margin), reducing initial load from 100+ concurrent requests to ~5-10 visible. Also: folk-rapp #getModulePath always uses subdomain routing (no subpath fallback), and DID re-syncs on auth-change events. Co-Authored-By: Claude Opus 4.6 --- lib/community-sync.ts | 25 ++++++++++++++++++++++--- lib/folk-embed.ts | 27 ++++++++++++++++++++++++--- lib/folk-feed.ts | 8 ++++++-- lib/folk-rapp.ts | 43 ++++++++++++++++++++++++++++++------------- lib/folk-shape.ts | 36 ++++++++++++++++++++++++++++++++++++ website/canvas.html | 4 ++++ 6 files changed, 122 insertions(+), 21 deletions(-) diff --git a/lib/community-sync.ts b/lib/community-sync.ts index f461475b..ac11b937 100644 --- a/lib/community-sync.ts +++ b/lib/community-sync.ts @@ -166,6 +166,7 @@ export class CommunitySync extends EventTarget { #syncedDebounceTimer: ReturnType | null = null; #initialSyncFired = false; #wsUrl: string | null = null; + #localDID: string = ''; // ── Undo/Redo state ── #undoStack: UndoEntry[] = []; @@ -195,6 +196,11 @@ export class CommunitySync extends EventTarget { } } + /** Set the local user's DID so forgotten-shape filtering is per-user. */ + setLocalDID(did: string): void { + this.#localDID = did; + } + /** * Load document and sync state from offline cache. * Call BEFORE connect() to show cached content immediately. @@ -878,9 +884,14 @@ export class CommunitySync extends EventTarget { for (const [id, shapeData] of Object.entries(shapes)) { const d = shapeData as Record; if (d.deleted === true) continue; // Deleted: not in DOM - this.#applyShapeToDOM(shapeData); - // If forgotten (faded), emit state-changed so canvas can apply visual + // Skip shapes this user has forgotten — one delete = gone from their view const fb = d.forgottenBy; + if (this.#localDID && fb && typeof fb === 'object' + && (fb as Record)[this.#localDID]) { + continue; + } + this.#applyShapeToDOM(shapeData); + // If forgotten by others (but not this user), emit state-changed for fade visual if (fb && typeof fb === 'object' && Object.keys(fb).length > 0) { this.dispatchEvent(new CustomEvent("shape-state-changed", { detail: { shapeId: id, state: 'forgotten', data: shapeData } @@ -945,6 +956,14 @@ export class CommunitySync extends EventTarget { const d = shapeData as Record; const state = this.getShapeVisualState(shapeId); + // Skip shapes this user has forgotten — don't create/update DOM + const fb = d.forgottenBy; + if (this.#localDID && fb && typeof fb === 'object' + && (fb as Record)[this.#localDID]) { + this.#removeShapeFromDOM(shapeId); + continue; + } + if (state === 'deleted') { // Hard-deleted: remove from DOM this.#removeShapeFromDOM(shapeId); @@ -952,7 +971,7 @@ export class CommunitySync extends EventTarget { detail: { shapeId, state: 'deleted', data: shapeData } })); } else if (state === 'forgotten') { - // Forgotten: keep in DOM, emit state change for fade visual + // Forgotten by others: keep in DOM, emit state change for fade visual this.#applyShapeToDOM(shapeData); this.dispatchEvent(new CustomEvent("shape-state-changed", { detail: { shapeId, state: 'forgotten', data: shapeData } diff --git a/lib/folk-embed.ts b/lib/folk-embed.ts index 704768bd..487dc46c 100644 --- a/lib/folk-embed.ts +++ b/lib/folk-embed.ts @@ -222,6 +222,7 @@ export class FolkEmbed extends FolkShape { #url: string | null = null; #error: string | null = null; + #embedRendered = false; get url() { return this.#url; @@ -320,15 +321,34 @@ export class FolkEmbed extends FolkShape { this.dispatchEvent(new CustomEvent("close")); }); - // If URL is already set, render embed + // Defer embed rendering until shape enters viewport if (this.#url) { - const embedUrl = transformUrl(this.#url); - this.#renderEmbed(content, urlInputContainer, titleText, headerTitle, this.#url, embedUrl); + if (this.hasBeenVisible) { + const embedUrl = transformUrl(this.#url); + this.#renderEmbed(content, urlInputContainer, titleText, headerTitle, this.#url, embedUrl); + } else { + // Show URL text as lightweight placeholder + titleText.textContent = getDisplayTitle(this.#url); + } } return root; } + protected override onBecameVisible(): void { + if (this.#url && !this.#embedRendered) { + const root = this.renderRoot as ShadowRoot; + const content = root.querySelector(".content") as HTMLElement; + const urlInputContainer = root.querySelector(".url-input-container") as HTMLElement; + const titleText = root.querySelector(".title-text") as HTMLElement; + const headerTitle = root.querySelector(".header-title") as HTMLElement; + if (content && urlInputContainer && titleText && headerTitle) { + const embedUrl = transformUrl(this.#url); + this.#renderEmbed(content, urlInputContainer, titleText, headerTitle, this.#url, embedUrl); + } + } + } + #renderEmbed( content: HTMLElement, urlInputContainer: HTMLElement, @@ -337,6 +357,7 @@ export class FolkEmbed extends FolkShape { originalUrl: string, embedUrl: string | null ) { + this.#embedRendered = true; // Update header titleText.textContent = getDisplayTitle(originalUrl); const favicon = document.createElement("img"); diff --git a/lib/folk-feed.ts b/lib/folk-feed.ts index d7bbd837..46a6273e 100644 --- a/lib/folk-feed.ts +++ b/lib/folk-feed.ts @@ -64,8 +64,7 @@ export class FolkFeed extends FolkShape { connectedCallback() { super.connectedCallback(); this.#buildUI(); - this.#fetchFeed(); - this.#startAutoRefresh(); + // Defer API calls until shape is visible (onBecameVisible handles it) } disconnectedCallback() { @@ -73,6 +72,11 @@ export class FolkFeed extends FolkShape { this.#stopAutoRefresh(); } + protected override onBecameVisible(): void { + this.#fetchFeed(); + this.#startAutoRefresh(); + } + attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) { super.attributeChangedCallback(name, oldVal, newVal); if (["source-module", "feed-id", "feed-filter", "max-items"].includes(name)) { diff --git a/lib/folk-rapp.ts b/lib/folk-rapp.ts index 59c48f11..a702106b 100644 --- a/lib/folk-rapp.ts +++ b/lib/folk-rapp.ts @@ -634,6 +634,7 @@ export class FolkRApp extends FolkShape { #refreshTimer: ReturnType | null = null; #modeToggleBtn: HTMLButtonElement | null = null; #resolvedPorts: PortDescriptor[] | null = null; + #contentLoaded = false; get moduleId() { return this.#moduleId; } set moduleId(value: string) { @@ -815,9 +816,13 @@ export class FolkRApp extends FolkShape { // Register for enabled-state broadcasts FolkRApp.#instances.add(this); - // Load content + // Defer heavy content loading until shape enters viewport if (this.#moduleId) { - this.#renderContent(); + if (this.hasBeenVisible) { + this.#renderContent(); + } else { + this.#showLoading(); + } } else { this.#showPicker(); } @@ -825,8 +830,8 @@ export class FolkRApp extends FolkShape { return root; } - disconnectedCallback() { - super.disconnectedCallback?.(); + override disconnectedCallback() { + super.disconnectedCallback(); FolkRApp.#instances.delete(this); if (this.#messageHandler) { window.removeEventListener("message", this.#messageHandler); @@ -838,6 +843,23 @@ export class FolkRApp extends FolkShape { } } + protected override onBecameVisible(): void { + if (this.#moduleId && !this.#contentLoaded) { + this.#renderContent(); + } + } + + #showLoading() { + if (!this.#contentEl) return; + const meta = MODULE_META[this.#moduleId]; + this.#contentEl.innerHTML = ` +
+ + ${meta?.name || this.#moduleId} +
+ `; + } + #buildSwitcher(switcherEl: HTMLElement) { const enabledSet = FolkRApp.enabledModuleIds ?? ((window as any).__rspaceEnabledModules ? new Set((window as any).__rspaceEnabledModules as string[]) : null); @@ -955,16 +977,9 @@ export class FolkRApp extends FolkShape { } } - /** Derive the base module URL path, accounting for subdomain routing */ + /** Derive the base module URL path — spaces are always subdomains */ #getModulePath(): string { - if (!this.#spaceSlug) { - const pathParts = window.location.pathname.split("/").filter(Boolean); - if (pathParts.length >= 1) this.#spaceSlug = pathParts[0]; - } - const space = this.#spaceSlug || "demo"; - const hostname = window.location.hostname; - const onSubdomain = hostname.split(".").length >= 3 && hostname.startsWith(space + "."); - return onSubdomain ? `/${this.#moduleId}` : `/${space}/${this.#moduleId}`; + return `/${this.#moduleId}`; } /** Check if this shape's module is currently disabled */ @@ -1014,6 +1029,8 @@ export class FolkRApp extends FolkShape { #renderContent() { if (!this.#contentEl || !this.#moduleId) return; + this.#contentLoaded = true; + // Block rendering if module is disabled if (this.#isModuleDisabled()) { this.#showDisabled(); return; } diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts index 3f076f4f..105b5a5b 100644 --- a/lib/folk-shape.ts +++ b/lib/folk-shape.ts @@ -224,6 +224,32 @@ export class FolkShape extends FolkElement { static tagName = "folk-shape"; static styles = styles; + // ── Viewport-based lazy loading ── + static #visibilityObserver: IntersectionObserver | null = null; + static #ensureObserver(): IntersectionObserver { + if (!FolkShape.#visibilityObserver) { + FolkShape.#visibilityObserver = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + const shape = entry.target as FolkShape; + if (entry.isIntersecting && !shape.#hasBeenVisible) { + shape.#hasBeenVisible = true; + shape.onBecameVisible(); + } + } + }, + { rootMargin: '500px' } + ); + } + return FolkShape.#visibilityObserver; + } + + #hasBeenVisible = false; + get hasBeenVisible(): boolean { return this.#hasBeenVisible; } + + /** Called once when shape first enters viewport (+500px margin). Override to defer heavy init. */ + protected onBecameVisible(): void {} + #internals = this.attachInternals(); #attrWidth: Dimension = 0; #attrHeight: Dimension = 0; @@ -466,6 +492,16 @@ export class FolkShape extends FolkElement { return root; } + override connectedCallback() { + super.connectedCallback(); + FolkShape.#ensureObserver().observe(this); + } + + override disconnectedCallback() { + super.disconnectedCallback(); + FolkShape.#visibilityObserver?.unobserve(this); + } + getTransformDOMRect() { return this.#readonlyRect; } diff --git a/website/canvas.html b/website/canvas.html index 64d93e6f..78f06b3e 100644 --- a/website/canvas.html +++ b/website/canvas.html @@ -2563,6 +2563,9 @@ window.__communitySync?.disconnect?.(); window.location.href = "/"; } + + // Re-sync DID for forgotten-shape filtering after auth changes + window.__communitySync?.setLocalDID?.(getLocalDID()); }); // Load module list for app switcher and tab bar + menu @@ -3217,6 +3220,7 @@ // Initialize offline store and CommunitySync const offlineStore = new OfflineStore(); const sync = new CommunitySync(communitySlug, offlineStore); + sync.setLocalDID(getLocalDID()); window.__communitySync = sync; // Wire history panel to CommunitySync doc