perf(feeds): improve scrolling, media loading, and navigation (#1206)

Reduce avoidable React work during feed scrolling and navigation, restore React Compiler integration, update Virtuoso, and deduplicate media and immutable comment lookups. Preserve cached feed state, scroll restoration, and GIF thumbnail ownership across Activity hide/show.

Validated with focused regressions, production and throttled browser measurements, all three browser engines, and passing final CI across web, Android, Linux, macOS, and Windows. Correct the preexisting Windows native-binary assertion to its current package path.

Author: tomcasaburi

.github/workflows/ci.yml

@@ -495,7 +495,7 @@ jobs:
           APP_ASAR=$(find out -path '*/resources/app.asar' | head -n 1)
           KUBO_EXE=$(find out -path '*/resources/app.asar.unpacked/bin/win/ipfs.exe' | head -n 1)
           SQLITE_MODULE=$(find out -path '*/resources/app.asar.unpacked/node_modules/better-sqlite3/build/Release/better_sqlite3.node' | head -n 1)
-          DATACHANNEL_MODULE=$(find out -path '*/resources/app.asar.unpacked/node_modules/node-datachannel/build/Release/node_datachannel.node' | head -n 1)
+          DATACHANNEL_MODULE=$(find out -path '*/resources/app.asar.unpacked/node_modules/@node-datachannel/win32-x64-msvc/node_datachannel.node' | head -n 1)
           echo "Found ASAR: $APP_ASAR"
           echo "Found Kubo: $KUBO_EXE"
           echo "Found SQLite module: $SQLITE_MODULE"

package.json

@@ -45,7 +45,7 @@
     "react-i18next": "16.6.6",
     "react-router-dom": "7.18.2",
     "react-router-hash-link": "2.4.3",
-    "react-virtuoso": "4.18.5",
+    "react-virtuoso": "4.18.13",
     "tcp-port-used": "1.0.2",
     "typescript": "7.0.2",
     "workbox-core": "7.4.0",
@@ -139,6 +139,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "7.29.6",
     "@capacitor/android": "7.4.5",
     "@capacitor/cli": "7.4.5",
     "@capacitor/core": "7.4.5",
@@ -149,6 +150,8 @@
     "@electron-forge/plugin-auto-unpack-natives": "7.8.0",
     "@electron/rebuild": "3.7.2",
     "@reforged/maker-appimage": "5.1.1",
+    "@rolldown/plugin-babel": "0.1.8",
+    "@types/babel__core": "7.20.5",
     "@types/lodash": "4.17.24",
     "@types/memoizee": "0.4.9",
     "@vitejs/plugin-react": "6.0.0",
@@ -179,6 +182,7 @@
     "react-doctor": "0.8.1",
     "react-grab": "0.1.48",
     "react-scan": "0.5.3",
+    "rolldown": "1.0.3",
     "smol-toml": "1.6.1",
     "stream-browserify": "3.0.0",
     "vite": "8.0.16",

scripts/__tests__/react-compiler.node-test.mjs

@@ -0,0 +1,83 @@
+import assert from 'node:assert/strict';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join } from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { createServer, loadConfigFromFile } from 'vite';
+import { parseSync, traverse } from '@babel/core';
+
+test('the app Vite configuration preserves React Compiler behavior', { timeout: 30_000 }, async (t) => {
+  const configFile = fileURLToPath(new URL('../../vite.config.js', import.meta.url));
+  const root = dirname(configFile);
+  const cacheDir = mkdtempSync(join(tmpdir(), '5chan-react-compiler-'));
+  const environment = new Map(['VITE_APP_VERSION', 'VITE_COMMIT_REF', 'VITE_LATEST_RELEASE_COMMIT_REF'].map((key) => [key, process.env[key]]));
+  let server;
+  t.after(async () => {
+    await server?.close();
+    rmSync(cacheDir, { recursive: true, force: true });
+    for (const [key, value] of environment) {
+      if (value === undefined) delete process.env[key];
+      else process.env[key] = value;
+    }
+  });
+
+  // Keep metadata resolution offline, including shallow CI checkouts without release tags.
+  process.env.VITE_COMMIT_REF = 'compiler-test';
+  process.env.VITE_LATEST_RELEASE_COMMIT_REF = 'compiler-test';
+  const loaded = await loadConfigFromFile({ command: 'serve', mode: 'development' }, configFile, root);
+  assert.ok(loaded, `Could not load ${configFile}`);
+  server = await createServer({
+    ...loaded.config,
+    configFile: false,
+    root,
+    cacheDir,
+    server: { ...loaded.config.server, middlewareMode: true, hmr: false, watch: null },
+    optimizeDeps: { noDiscovery: true, include: [] },
+  });
+
+  const sourcePath = '/src/components/loading-ellipsis/loading-ellipsis.tsx';
+  t.diagnostic(`Transforming ${sourcePath} with ${configFile}`);
+  const transformed = await server.transformRequest(sourcePath);
+  assert.ok(transformed, `Vite did not transform ${sourcePath}`);
+  assert.match(transformed.code, /compiler-runtime/, 'React Compiler must inject its runtime');
+  assert.match(transformed.code, /react\.memo_cache_sentinel/, 'React Compiler must emit memo caches for the component');
+
+  // Vitest normally runs without React Compiler. Check the actual app transform:
+  // memoizing a bound store hook would skip React hooks on subsequent renders.
+  for (const [path, expectedCalls] of [
+    ['/src/hooks/use-prune-hidden-catalog-threads.ts', 2],
+    ['/src/hooks/use-state-string.ts', 1],
+    ['/src/hooks/use-communities-stats.ts', 2],
+    ['/src/views/board/board.tsx', 1],
+  ]) {
+    await t.test(`store subscriptions stay unconditional in ${path}`, async () => {
+      const result = await server.transformRequest(path);
+      assert.ok(result, `Vite did not transform ${path}`);
+      const ast = parseSync(result.code, { configFile: false, babelrc: false });
+      const storeHooks = new Set();
+      traverse(ast, {
+        ImportDeclaration(importPath) {
+          if (importPath.node.source.value.includes('bitsocial-internals/stores')) {
+            for (const specifier of importPath.node.specifiers) {
+              storeHooks.add(specifier.local.name);
+            }
+          }
+        },
+      });
+      let calls = 0;
+      traverse(ast, {
+        CallExpression(callPath) {
+          if (callPath.node.callee.type !== 'Identifier' || !storeHooks.has(callPath.node.callee.name)) return;
+          calls++;
+          const statement = callPath.getStatementParent();
+          assert.ok(
+            statement.parentPath.isBlockStatement() && statement.parentPath.parentPath.isFunction(),
+            `${callPath.node.callee.name} must run unconditionally in the compiled component or hook`,
+          );
+        },
+      });
+      assert.equal(calls, expectedCalls, 'Check every expected bound store hook call');
+    });
+  }
+});

src/components/__tests__/post-community-address-compat.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createElement } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import PostDesktop from '../post-desktop';
 import PostMobile from '../post-mobile';
@@ -52,12 +52,16 @@ const testState = vi.hoisted(() => ({
   accountCommentsByCid: {} as Record<string, TestComment | undefined>,
   directoryEntryByAddress: {} as Record<string, { address: string; directoryCode?: string; features?: Record<string, unknown>; title?: string } | undefined>,
   hasMoreReplies: false,
+  freshReplyInputs: [] as TestComment[][],
   openReplyModalMock: vi.fn(),
   pseudonymityMode: 'none',
   replyComments: [] as Array<TestComment | undefined>,
   setResetFunctionMock: vi.fn(),
   stateString: undefined as string | undefined,
   virtuosoProps: [] as Array<{ defaultItemHeight?: number; heightEstimates?: number[]; itemSize?: unknown }>,
+  getVirtuosoStateMock: vi.fn(),
+  virtuosoSnapshot: { ranges: [0], scrollTop: 0 },
+  restoredVirtuosoStates: [] as Array<{ initialScrollTop?: number; restoreStateFrom?: { ranges: number[]; scrollTop: number } }>,
 }));
 
 const getMockPreloadedReplies = (comment?: TestComment, sortType?: string) => {
@@ -120,20 +124,28 @@ vi.mock('react-virtuoso', () => ({
         heightEstimates,
         itemSize,
         itemContent,
+        initialScrollTop,
+        restoreStateFrom,
       }: {
         components?: { Footer?: React.ComponentType };
         data?: TestComment[];
         defaultItemHeight?: number;
         heightEstimates?: number[];
         itemSize?: unknown;
         itemContent: (index: number, item: TestComment) => React.ReactNode;
+        initialScrollTop?: number;
+        restoreStateFrom?: { ranges: number[]; scrollTop: number };
       },
       ref: React.ForwardedRef<{ getState: (cb: (snapshot: { ranges: number[]; scrollTop: number }) => void) => void }>,
     ) => {
       testState.virtuosoProps.push({ defaultItemHeight, heightEstimates, itemSize });
+      testState.restoredVirtuosoStates.push({ initialScrollTop, restoreStateFrom });
 
       React.useImperativeHandle(ref, () => ({
-        getState: (cb) => cb({ ranges: [0], scrollTop: 0 }),
+        getState: (cb) => {
+          testState.getVirtuosoStateMock();
+          cb(testState.virtuosoSnapshot);
+        },
       }));
 
       return createElement(
@@ -358,7 +370,10 @@ vi.mock('../../hooks/use-progressive-render', () => ({
 }));
 
 vi.mock('../../hooks/use-fresh-replies', () => ({
-  default: (replies: TestComment[]) => replies,
+  default: (replies: TestComment[]) => {
+    testState.freshReplyInputs.push(replies);
+    return replies;
+  },
 }));
 
 vi.mock('../../hooks/use-reply-height-estimates', () => ({
@@ -378,7 +393,7 @@ vi.mock('../../lib/constants', () => ({
 vi.mock('../../lib/utils/replies-preview-utils', () => ({
   computeOmittedCount: () => 0,
   filterRepliesForDisplay: (replies: TestComment[]) => replies,
-  getPreviewDisplayReplies: (replies: TestComment[]) => replies,
+  getPreviewDisplayReplies: (replies: TestComment[]) => [...replies],
   getTotalReplyCount: ({ replyCount }: { replyCount?: number }) => replyCount ?? 0,
   hasEnoughPreviewReplies: ({ replyCount, loadedCount, visibleCount }: { replyCount?: number; loadedCount: number; visibleCount: number }) =>
     loadedCount >= Math.min(visibleCount, replyCount ?? visibleCount),
@@ -483,10 +498,13 @@ describe('post community address compatibility', () => {
       'music-posting.eth': { address: 'music-posting.eth', features: {} },
     };
     testState.hasMoreReplies = false;
+    testState.freshReplyInputs = [];
     testState.pseudonymityMode = 'none';
     testState.replyComments = [];
     testState.stateString = undefined;
     testState.virtuosoProps = [];
+    testState.virtuosoSnapshot = { ranges: [0], scrollTop: 0 };
+    testState.restoredVirtuosoStates = [];
 
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -733,6 +751,80 @@ describe('post community address compatibility', () => {
     });
   });
 
+  it.each([
+    ['desktop', PostDesktop],
+    ['mobile', PostMobile],
+  ] as const)('saves %s reply sizes on departure and restores them on back without snapshotting scroll ticks', async (mode, PostComponent) => {
+    const post = { ...makeLegacyThread(), cid: `snapshot-${mode}` };
+    const NavigationHarness = () => {
+      const location = useLocation();
+      const navigate = useNavigate();
+      return createElement(
+        React.Fragment,
+        {},
+        createElement('button', { 'data-testid': 'leave-thread', onClick: () => navigate('/') }, 'home'),
+        createElement('button', { 'data-testid': 'back-to-thread', onClick: () => navigate(-1) }, 'back'),
+        location.pathname.includes('/thread/') ? createElement(PostComponent, { post, showAllReplies: true }) : null,
+      );
+    };
+
+    await renderWithRoute(createElement(NavigationHarness), `/mu/thread/${post.cid}`);
+    expect(container.querySelector('[data-testid="virtuoso"]')).toBeNull();
+
+    // Replies may become virtualized only after loading their first page.
+    testState.hasMoreReplies = true;
+    await renderWithRoute(createElement(NavigationHarness), `/mu/thread/${post.cid}`);
+    expect(container.querySelector('[data-testid="virtuoso"]')).toBeTruthy();
+
+    await act(async () => {
+      for (let index = 0; index < 100; index += 1) window.dispatchEvent(new Event('scroll'));
+    });
+    expect(testState.getVirtuosoStateMock).not.toHaveBeenCalled();
+
+    // Saving after a resize captures the latest item sizes too.
+    testState.virtuosoSnapshot = { ranges: [1, 4], scrollTop: 480 };
+    await act(async () => {
+      window.dispatchEvent(new Event('resize'));
+      window.dispatchEvent(new Event('pagehide'));
+    });
+    expect(testState.getVirtuosoStateMock).toHaveBeenCalledTimes(1);
+
+    testState.virtuosoSnapshot = { ranges: [2, 5], scrollTop: 1024 };
+    await act(async () => container.querySelector<HTMLButtonElement>('[data-testid="leave-thread"]')?.click());
+    expect(testState.getVirtuosoStateMock).toHaveBeenCalledTimes(2);
+    expect(container.querySelector('[data-testid="virtuoso"]')).toBeNull();
+
+    window.dispatchEvent(new Event('pagehide'));
+    expect(testState.getVirtuosoStateMock).toHaveBeenCalledTimes(2);
+
+    await act(async () => container.querySelector<HTMLButtonElement>('[data-testid="back-to-thread"]')?.click());
+    expect(testState.restoredVirtuosoStates.at(-1)).toEqual({
+      initialScrollTop: 1024,
+      restoreStateFrom: { ranges: [2, 5], scrollTop: 1024 },
+    });
+  });
+
+  it('preserves unchanged desktop preview inputs and updates them when replies change', async () => {
+    const post = makeLegacyThread();
+    const reply = post.replies!.pages!.new.comments![0];
+    const replyPaginationOverride = { replies: [reply] };
+
+    await renderWithRoute(createElement(PostDesktop, { post, replyPaginationOverride }));
+    const firstPreview = testState.freshReplyInputs.at(-1);
+    expect(firstPreview).toEqual([reply]);
+    testState.freshReplyInputs = [];
+
+    await renderWithRoute(createElement(PostDesktop, { post, replyPaginationOverride }));
+    expect(testState.freshReplyInputs.length).toBeGreaterThan(0);
+    expect(testState.freshReplyInputs.every((replies) => replies === firstPreview)).toBe(true);
+
+    const updatedReply = { ...reply, cid: 'updated-reply', content: 'Updated preview' };
+    await renderWithRoute(createElement(PostDesktop, { post, replyPaginationOverride: { replies: [updatedReply] } }));
+    expect(testState.freshReplyInputs.at(-1)).toEqual([updatedReply]);
+    expect(testState.freshReplyInputs.at(-1)).not.toBe(firstPreview);
+    expect(container.textContent).toContain('updated-reply');
+  });
+
   it('keeps board-card Pretext heights when preview replies are rendered', async () => {
     await renderWithRoute(createElement(PostDesktop, { post: makeLegacyThread() }));
     expect(container.querySelector('.postDesktop')?.getAttribute('data-pretext-height')).toBeTruthy();

src/components/comment-media/__tests__/comment-media.test.tsx

@@ -13,6 +13,7 @@ const testState = vi.hoisted(() => ({
   getHasThumbnailResult: true,
   gifFrameStatus: 'idle' as 'failed' | 'idle' | 'loading' | 'ready',
   gifFrameUrl: null as string | null,
+  gifFrameRequests: vi.fn(),
   hostname: 'example.com',
   isMobile: false,
   unmuteExpandedVideoSound: false,
@@ -65,10 +66,13 @@ vi.mock('../../../stores/use-expanded-media-store', () => {
 });
 
 vi.mock('../../../hooks/use-fetch-gif-first-frame', () => ({
-  default: () => ({
-    frameUrl: testState.gifFrameUrl,
-    status: testState.gifFrameStatus,
-  }),
+  default: (url?: string) => {
+    testState.gifFrameRequests(url);
+    return {
+      frameUrl: testState.gifFrameUrl,
+      status: testState.gifFrameStatus,
+    };
+  },
 }));
 
 vi.mock('../../../hooks/use-is-mobile', () => ({
@@ -285,6 +289,70 @@ describe('CommentMedia', () => {
     expect(container.querySelector('img[src="https://cdn.example.com/frame.png"]')).toBeTruthy();
   });
 
+  it('opens an inline GIF without fetching or mounting an unused still thumbnail', async () => {
+    const url = 'https://cdn.example.com/inline.gif';
+    await renderMedia({
+      commentMediaInfo: { type: 'gif', url },
+      disableToggle: true,
+      setShowThumbnail: setShowThumbnailMock,
+      showThumbnail: false,
+    });
+
+    expect(testState.gifFrameRequests).toHaveBeenLastCalledWith(undefined);
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+    expect(container.querySelector('img')?.getAttribute('src')).toBe(url);
+    expect(container.querySelector('[aria-label="Open GIF"]')).toBeNull();
+  });
+
+  it('opens an inline video with one media element and keeps normal collapse thumbnails available', async () => {
+    const commentMediaInfo = { type: 'video', url: 'https://cdn.example.com/inline.mp4' };
+    await renderMedia({ commentMediaInfo, disableToggle: true, setShowThumbnail: setShowThumbnailMock, showThumbnail: false });
+
+    expect(container.querySelectorAll('video')).toHaveLength(1);
+    expect(container.querySelector('video')?.getAttribute('src')).toBe(commentMediaInfo.url);
+
+    await renderMedia({ commentMediaInfo, setShowThumbnail: setShowThumbnailMock, showThumbnail: true });
+    const thumbnail = container.querySelector('video[aria-label="Video thumbnail"]');
+    expect(thumbnail?.getAttribute('src')).toBe(`${commentMediaInfo.url}#t=0.001`);
+    await renderMedia({ commentMediaInfo, setShowThumbnail: setShowThumbnailMock, showThumbnail: false });
+    expect(container.querySelector('video[aria-label="Video thumbnail"]')).toBe(thumbnail);
+    await renderMedia({ commentMediaInfo, setShowThumbnail: setShowThumbnailMock, showThumbnail: true });
+    expect(container.querySelector('video[aria-label="Video thumbnail"]')).toBe(thumbnail);
+    expect(container.querySelectorAll('video')).toHaveLength(1);
+  });
+
+  it('does not load an unused YouTube thumbnail for an expanded inline embed', async () => {
+    await renderMedia({
+      commentMediaInfo: { type: 'iframe', url: 'https://youtu.be/inline', patternThumbnailUrl: 'https://img.youtube.com/vi/inline/maxresdefault.jpg' },
+      disableToggle: true,
+      setShowThumbnail: setShowThumbnailMock,
+      showThumbnail: false,
+    });
+
+    expect(container.querySelector('[data-testid="embed"]')).toBeTruthy();
+    expect(container.querySelector('img')).toBeNull();
+  });
+
+  it('keeps floating GIF thumbnails and audio preview players available', async () => {
+    await renderMedia({
+      commentMediaInfo: { type: 'gif', url: 'https://cdn.example.com/hover.gif' },
+      disableToggle: true,
+      isFloatingEmbed: true,
+      setShowThumbnail: setShowThumbnailMock,
+      showThumbnail: true,
+    });
+    expect(testState.gifFrameRequests).toHaveBeenLastCalledWith('https://cdn.example.com/hover.gif');
+    expect(container.querySelector('[aria-label="Open GIF"]')).toBeTruthy();
+
+    await renderMedia({
+      commentMediaInfo: { type: 'audio', url: 'https://cdn.example.com/audio.mp3' },
+      disableToggle: true,
+      setShowThumbnail: setShowThumbnailMock,
+      showThumbnail: false,
+    });
+    expect(container.querySelector('audio[aria-label="Audio preview"]')).toBeTruthy();
+  });
+
   it('renders fallback embedded webpage links when there is no thumbnail', async () => {
     testState.canEmbed = true;
     testState.getHasThumbnailResult = false;