();
+
scan({
enabled: true,
showToolbar: !(window as any).__PROFILING__,
+ onRender: (fiber, renders) => {
+ for (const render of renders) {
+ const name = render.componentName || (fiber?.type as any)?.displayName || (fiber?.type as any)?.name;
+ if (!name) {
+ continue;
+ }
+ const row = report.get(name) || { count: 0, time: 0 };
+ row.count += render.count || 1;
+ row.time += render.time || 0;
+ report.set(name, row);
+ }
+ },
});
+ // Returns a plain object rather than a Map: callers serialize this with JSON.stringify, and
+ // JSON.stringify(new Map()) is always "{}" regardless of contents.
+ (window as any).__getReactScanReport = () => Object.fromEntries(report);
+ (window as any).__resetReactScanReport = () => report.clear();
+
const notReady = async () => ({
error: 'element-source is not ready yet.',
});
@@ -22,7 +47,6 @@ if (import.meta.env.DEV) {
formatStack: () => '',
};
- (window as any).__getReactScanReport = getReport;
(window as any).__ELEMENT_SOURCE__ = elementSourceApi;
import('element-source')
diff --git a/src/lib/zustand-shallow-shim.ts b/src/lib/zustand-shallow-shim.ts
new file mode 100644
index 00000000..af04d77d
--- /dev/null
+++ b/src/lib/zustand-shallow-shim.ts
@@ -0,0 +1,15 @@
+// zustand v4's `zustand/shallow` default export wraps the real comparator in a
+// console.warn deprecation notice that fires on EVERY call. bitsocial-react-hooks
+// imports it as a default (comments.js, communities.js, feeds.js) and passes it as
+// the zustand equality function, so the warning fires once per subscriber per store
+// notification — ~1000 times/second while a feed streams.
+//
+// Aliasing `zustand/shallow` to this shim keeps identical comparison semantics while
+// dropping the per-call console.warn. Remove once bitsocial-react-hooks switches to
+// the named `import { shallow } from 'zustand/shallow'`.
+// Imported from 'zustand/vanilla/shallow' (not 'zustand/shallow') so the alias that
+// points at this file does not resolve back into itself.
+import { shallow } from 'zustand/vanilla/shallow';
+
+export { shallow };
+export default shallow;
diff --git a/src/views/home/__tests__/home.test.tsx b/src/views/home/__tests__/home.test.tsx
index a581ac89..8187c556 100644
--- a/src/views/home/__tests__/home.test.tsx
+++ b/src/views/home/__tests__/home.test.tsx
@@ -67,6 +67,8 @@ vi.mock('../../../hooks/use-directory-list', async () => {
vi.mock('../../../hooks/use-communities-stats', () => ({
CommunityStatsCollector: ({ communityAddress }: { communityAddress: string }) =>
createElement('div', { 'data-testid': 'stats-collector', 'data-address': communityAddress }),
+ CommunityStatsMetadataLoader: ({ communityAddresses }: { communityAddresses: string[] }) =>
+ createElement('div', { 'data-testid': 'stats-metadata-loader', 'data-addresses': communityAddresses.join(',') }),
useCommunitiesStatsStore: (selector: (state: { communityStats: typeof testState.communityStats }) => unknown) => selector({ communityStats: testState.communityStats }),
}));
@@ -167,12 +169,15 @@ describe('Home', () => {
it('renders the home view chrome, child sections, collectors, and aggregated stats', () => {
renderHome();
- expect(vi.mocked(useFeedStateString)).toHaveBeenCalledWith([]);
+ // Nothing is loading, so the loading indicator/ellipsis never mount and the live client-state
+ // subscription is never opened. Stats previously subscribed with an empty list regardless.
+ expect(vi.mocked(useFeedStateString)).not.toHaveBeenCalled();
expect(document.title).toBe('5chan');
expect(container.querySelector('[data-testid="disclaimer-modal"]')?.textContent).toBe('disclaimer-modal');
expect(container.querySelector('[data-testid="directory-modal"]')?.textContent).toBe('directory-modal');
expect(container.querySelector('[data-testid="boards-list"]')?.textContent).toBe('boards:2');
expect(container.querySelector('[data-testid="popular-threads-box"]')?.textContent).toBe('popular:2:2');
+ expect(container.querySelector('[data-testid="stats-metadata-loader"]')?.getAttribute('data-addresses')).toBe('music-posting.eth,tech-posting.eth');
expect(container.querySelectorAll('[data-testid="stats-collector"]')).toHaveLength(2);
expect(testState.directoryListCodes).toEqual([]);
expect(container.textContent).toContain('stats');
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 0bbe6ead..92c5faf7 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { memo, useEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import styles from './home.module.css';
import { type DirectoryCommunity, useDirectories, useDirectoryAddresses } from '../../hooks/use-directories';
import { sortDirectoryBoardsByRank, useDirectoryLists } from '../../hooks/use-directory-list';
-import { CommunityStatsCollector, useCommunitiesStatsStore } from '../../hooks/use-communities-stats';
+import { CommunityStatsCollector, CommunityStatsMetadataLoader, useCommunitiesStatsStore } from '../../hooks/use-communities-stats';
import PopularThreadsBox from './popular-threads-box';
import BoardsList from './boards-list';
import SiteLegalMeta from '../../components/site-legal-meta';
@@ -190,6 +190,36 @@ const StatsOptionsModal = () => {
);
};
+/**
+ * Follows client states for every collected board, so it updates constantly while boards load.
+ * The two components below own it instead of `Stats`, which otherwise rerendered the whole stats
+ * box (and its tooltip portal) on every tick just to refresh this one string.
+ */
+const useStatsLoadingString = (addresses: string[]) => {
+ const { t } = useTranslation();
+ return useFeedStateString(addresses) || t('loading');
+};
+
+const StatsLoadingIndicator = memo(({ addresses }: { addresses: string[] }) => {
+ const loadingStateString = useStatsLoadingString(addresses);
+
+ return (
+
+
+
+
+
+ );
+});
+StatsLoadingIndicator.displayName = 'StatsLoadingIndicator';
+
+const StatsLoadingEllipsis = memo(({ addresses }: { addresses: string[] }) => {
+ const loadingStateString = useStatsLoadingString(addresses);
+
+ return ;
+});
+StatsLoadingEllipsis.displayName = 'StatsLoadingEllipsis';
+
const Stats = ({ directories }: { directories: DirectoryCommunity[] }) => {
const { t } = useTranslation();
const statsScope = useHomepageStatsOptionsStore((state) => state.statsScope);
@@ -252,11 +282,10 @@ const Stats = ({ directories }: { directories: DirectoryCommunity[] }) => {
}, [collectorAddresses, communitiesStats]);
const hasDisplayableStats = boardsWithStats > 0 || (collectorAddresses.length > 0 && boardsLoaded === collectorAddresses.length);
const isStatsLoading = !hasDisplayableStats || boardsLoaded < collectorAddresses.length;
- const loadingStateString = useFeedStateString(isStatsLoading ? collectorAddresses : EMPTY_STATS_LIST) || t('loading');
return (
<>
- {/* Render collectors to fetch stats for each community */}
+
{collectorAddresses.map((address) => (
))}
@@ -264,13 +293,7 @@ const Stats = ({ directories }: { directories: DirectoryCommunity[] }) => {
{t('stats')}
- {isStatsLoading && (
-
-
-
-
-
- )}
+ {isStatsLoading && }
@@ -288,7 +311,7 @@ const Stats = ({ directories }: { directories: DirectoryCommunity[] }) => {
) : (
-
+
)}
diff --git a/vite.config.js b/vite.config.js
index 07d8490c..5e91bf6b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -490,6 +490,10 @@ export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
+ // bitsocial-react-hooks imports zustand/shallow's deprecated default export and
+ // passes it as a store equality fn, so its console.warn fires on every comparator
+ // call (~1000/s while feeds stream). Redirect to an unwrapped re-export.
+ 'zustand/shallow': resolve(__dirname, 'src/lib/zustand-shallow-shim.ts'),
'node-fetch': 'isomorphic-fetch',
assert: 'assert',
stream: 'stream-browserify',
@@ -524,9 +528,6 @@ export default defineConfig({
rollupOptions: {
output: {
manualChunks(id) {
- if (/[\\/]node_modules[\\/](@pkcprotocol[\\/]pkc-js)[\\/]/.test(id)) {
- return 'pkc-js';
- }
if (/[\\/]node_modules[\\/](@bitsocialnet[\\/]bitsocial-react-hooks)[\\/]/.test(id)) {
return 'bitsocial-react-hooks';
}