From 90e99383c3e25fd56ed97f84116d0df2b9120b90 Mon Sep 17 00:00:00 2001
From: David Ejere <ejeredavid2001@gmail.com>
Date: Tue, 28 Jul 2026 14:02:38 +0100
Subject: [PATCH 1/3] fix(creator-card): wrap bonding curve chart in error
 boundary (#690)

Extends SectionErrorBoundary with optional title/description props
(backward compatible, defaulting to prior copy) so the bonding curve
sparkline in CreatorCard can fail independently without taking down the
whole card or profile page. Retry is manual only (no auto-retry loop).
---
 src/components/common/CreatorCard.tsx         | 52 +++++++-----
 .../common/SectionErrorBoundary.tsx           | 27 ++++--
 .../__tests__/SectionErrorBoundary.test.tsx   | 82 +++++++++++++++++++
 3 files changed, 132 insertions(+), 29 deletions(-)

diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx
index 43c82eb7..65781d52 100644
--- a/src/components/common/CreatorCard.tsx
+++ b/src/components/common/CreatorCard.tsx
@@ -12,6 +12,7 @@ import {
 	ExternalLink,
 } from 'lucide-react';
 import { Sparkline } from '@/components/ui/sparkline';
+import SectionErrorBoundary from '@/components/common/SectionErrorBoundary';
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -367,29 +368,36 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
 				else if (latest < earliest) lineColor = '#ef4444';
 
 				return (
-					<div className="mt-3">
-						<Sparkline
-							data={creator.priceHistory}
-							color={lineColor}
-						/>
-						<table id={priceChartDescriptionId} className="sr-only">
-							<caption>{priceChartAccessibility.summary}</caption>
-							<thead>
-								<tr>
-									<th scope="col">Point</th>
-									<th scope="col">Key price</th>
-								</tr>
-							</thead>
-							<tbody>
-								{priceChartAccessibility.points.map(point => (
-									<tr key={point.label}>
-										<th scope="row">{point.label}</th>
-										<td>{point.value}</td>
+					<SectionErrorBoundary
+						sectionName="bonding curve chart"
+						title="Chart unavailable — try refreshing"
+						description=""
+						minHeight={40}
+					>
+						<div className="mt-3">
+							<Sparkline
+								data={creator.priceHistory}
+								color={lineColor}
+							/>
+							<table id={priceChartDescriptionId} className="sr-only">
+								<caption>{priceChartAccessibility.summary}</caption>
+								<thead>
+									<tr>
+										<th scope="col">Point</th>
+										<th scope="col">Key price</th>
 									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
+								</thead>
+								<tbody>
+									{priceChartAccessibility.points.map(point => (
+										<tr key={point.label}>
+											<th scope="row">{point.label}</th>
+											<td>{point.value}</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					</SectionErrorBoundary>
 				);
 			})()}
 
diff --git a/src/components/common/SectionErrorBoundary.tsx b/src/components/common/SectionErrorBoundary.tsx
index 97494039..8e195b67 100644
--- a/src/components/common/SectionErrorBoundary.tsx
+++ b/src/components/common/SectionErrorBoundary.tsx
@@ -8,6 +8,17 @@ interface Props {
 	sectionName?: string;
 	minHeight?: string | number;
 	className?: string;
+	/**
+	 * Overrides the default "Something went wrong in this section" heading.
+	 * Use for a short, section-specific message (e.g. "Chart unavailable —
+	 * try refreshing").
+	 */
+	title?: string;
+	/**
+	 * Overrides the default explanatory paragraph. Pass an empty string to
+	 * show only the title (no secondary copy).
+	 */
+	description?: string;
 }
 
 interface State {
@@ -48,14 +59,16 @@ class SectionErrorBoundary extends Component<Props, State> {
 					<div className="flex flex-col items-center gap-2">
 						<AlertCircle className="h-10 w-10 text-destructive" />
 						<h3 className="text-lg font-semibold">
-							Something went wrong in this section
+							{this.props.title ?? 'Something went wrong in this section'}
 						</h3>
-						<p className="max-w-md text-sm text-muted-foreground">
-							{this.props.sectionName 
-								? `We encountered an error while loading the ${this.props.sectionName}.` 
-								: 'We encountered an error while loading this content.'}
-							Please try again or contact support if the issue persists.
-						</p>
+						{this.props.description !== '' && (
+							<p className="max-w-md text-sm text-muted-foreground">
+								{this.props.description ??
+									(this.props.sectionName
+										? `We encountered an error while loading the ${this.props.sectionName}. Please try again or contact support if the issue persists.`
+										: 'We encountered an error while loading this content. Please try again or contact support if the issue persists.')}
+							</p>
+						)}
 					</div>
 					<Button
 						variant="outline"
diff --git a/src/components/common/__tests__/SectionErrorBoundary.test.tsx b/src/components/common/__tests__/SectionErrorBoundary.test.tsx
index 9e024e35..36191385 100644
--- a/src/components/common/__tests__/SectionErrorBoundary.test.tsx
+++ b/src/components/common/__tests__/SectionErrorBoundary.test.tsx
@@ -78,4 +78,86 @@ describe('SectionErrorBoundary', () => {
 		expect(alert).toHaveStyle('min-height: 500px');
 		expect(alert).toHaveClass('custom-class');
 	});
+
+	it('renders a custom title when provided', () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {});
+
+		render(
+			<SectionErrorBoundary title="Chart unavailable — try refreshing">
+				<BuggyComponent shouldThrow={true} />
+			</SectionErrorBoundary>
+		);
+
+		expect(
+			screen.getByText('Chart unavailable — try refreshing')
+		).toBeInTheDocument();
+		expect(screen.queryByText(/something went wrong/i)).not.toBeInTheDocument();
+	});
+
+	it('omits the description paragraph when description is an empty string', () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {});
+
+		render(
+			<SectionErrorBoundary title="Chart unavailable — try refreshing" description="">
+				<BuggyComponent shouldThrow={true} />
+			</SectionErrorBoundary>
+		);
+
+		expect(
+			screen.getByText('Chart unavailable — try refreshing')
+		).toBeInTheDocument();
+		expect(
+			screen.queryByText(/we encountered an error/i)
+		).not.toBeInTheDocument();
+	});
+
+	it('renders a custom description when provided', () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {});
+
+		render(
+			<SectionErrorBoundary description="Custom explanation text">
+				<BuggyComponent shouldThrow={true} />
+			</SectionErrorBoundary>
+		);
+
+		expect(screen.getByText('Custom explanation text')).toBeInTheDocument();
+	});
+
+	it('does not retry automatically after repeated failures (manual retry only)', () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {});
+
+		const { rerender } = render(
+			<SectionErrorBoundary>
+				<BuggyComponent shouldThrow={true} />
+			</SectionErrorBoundary>
+		);
+
+		expect(screen.getByRole('alert')).toBeInTheDocument();
+
+		// Re-rendering with the same throwing child (e.g. parent re-render)
+		// must NOT clear the error state on its own — only clicking Retry does.
+		rerender(
+			<SectionErrorBoundary>
+				<BuggyComponent shouldThrow={true} />
+			</SectionErrorBoundary>
+		);
+
+		expect(screen.getByRole('alert')).toBeInTheDocument();
+	});
+
+	it('logs the caught error via componentDidCatch when an error occurs', () => {
+		const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+		render(
+			<SectionErrorBoundary sectionName="bonding curve chart">
+				<BuggyComponent shouldThrow={true} />
+			</SectionErrorBoundary>
+		);
+
+		expect(consoleSpy).toHaveBeenCalledWith(
+			expect.stringContaining('bonding curve chart'),
+			expect.any(Error),
+			expect.anything()
+		);
+	});
 });

From 20665b39356e8a55d06b084a5ddf479c3cc248df Mon Sep 17 00:00:00 2001
From: David Ejere <ejeredavid2001@gmail.com>
Date: Tue, 28 Jul 2026 14:17:31 +0100
Subject: [PATCH 2/3] feat(marketplace): stale-while-revalidate cache for
 creator list (#691)

Sets a 60s staleTime on useInfiniteCreatorMarketplace so cached pages
render instantly on remount while React Query silently refetches in
the background. Adds isRefreshing (true only during a background
refetch, never during the initial load or next-page fetch) and wires
a "Refreshing..." indicator into CreatorMarketplaceInfiniteList.
Buy/sell trades now also invalidate queryKeys.creators.all in
useTradeMutation's onSettled so the marketplace list never has to
wait out the staleTime after a completed trade.
---
 .../common/CreatorMarketplaceInfiniteList.tsx |  11 ++
 .../CreatorMarketplaceInfiniteList.test.tsx   |  46 ++++++++
 .../__tests__/tradeCacheInvalidation.test.ts  |  49 +++++++--
 .../useInfiniteCreatorMarketplace.test.ts     | 102 ++++++++++++++++++
 src/hooks/useInfiniteCreatorMarketplace.ts    |  14 +++
 src/hooks/useWallet.ts                        |  11 +-
 6 files changed, 222 insertions(+), 11 deletions(-)

diff --git a/src/components/common/CreatorMarketplaceInfiniteList.tsx b/src/components/common/CreatorMarketplaceInfiniteList.tsx
index e92a74f4..9de6aac1 100644
--- a/src/components/common/CreatorMarketplaceInfiniteList.tsx
+++ b/src/components/common/CreatorMarketplaceInfiniteList.tsx
@@ -23,6 +23,7 @@ export default function CreatorMarketplaceInfiniteList({
 		hasMore,
 		isLoadingFirstPage,
 		isFetchingNextPage,
+		isRefreshing,
 		fetchNextPage,
 	} = useInfiniteCreatorMarketplace(params);
 
@@ -44,6 +45,16 @@ export default function CreatorMarketplaceInfiniteList({
 
 	return (
 		<div data-testid="creator-marketplace-infinite-list">
+			{isRefreshing && (
+				<div
+					data-testid="creator-marketplace-refreshing-indicator"
+					role="status"
+					aria-live="polite"
+					className="mb-3 text-xs text-muted-foreground"
+				>
+					Refreshing…
+				</div>
+			)}
 			<div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
 				{creators.map(creator => (
 					<CreatorCard key={creator.id} creator={creator} />
diff --git a/src/components/common/__tests__/CreatorMarketplaceInfiniteList.test.tsx b/src/components/common/__tests__/CreatorMarketplaceInfiniteList.test.tsx
index 62412869..3284bea7 100644
--- a/src/components/common/__tests__/CreatorMarketplaceInfiniteList.test.tsx
+++ b/src/components/common/__tests__/CreatorMarketplaceInfiniteList.test.tsx
@@ -40,6 +40,7 @@ const baseHookReturn = {
 	hasMore: false,
 	isLoadingFirstPage: false,
 	isFetchingNextPage: false,
+	isRefreshing: false,
 	fetchNextPage: vi.fn(),
 	error: null,
 };
@@ -139,4 +140,49 @@ describe('CreatorMarketplaceInfiniteList', () => {
 		expect(call.enabled).toBe(false);
 		expect(call.hasMore).toBe(true);
 	});
+
+	describe('background refresh indicator (#691)', () => {
+		it('shows a "Refreshing…" indicator while isRefreshing is true', () => {
+			mockUseInfiniteCreatorMarketplace.mockReturnValue({
+				...baseHookReturn,
+				creators: [makeCreator('a')],
+				isRefreshing: true,
+			});
+
+			render(<CreatorMarketplaceInfiniteList />);
+
+			expect(
+				screen.getByTestId('creator-marketplace-refreshing-indicator')
+			).toBeInTheDocument();
+			expect(screen.getByText('Refreshing…')).toBeInTheDocument();
+		});
+
+		it('does not show the refreshing indicator when isRefreshing is false', () => {
+			mockUseInfiniteCreatorMarketplace.mockReturnValue({
+				...baseHookReturn,
+				creators: [makeCreator('a')],
+				isRefreshing: false,
+			});
+
+			render(<CreatorMarketplaceInfiniteList />);
+
+			expect(
+				screen.queryByTestId('creator-marketplace-refreshing-indicator')
+			).not.toBeInTheDocument();
+		});
+
+		it('still renders cached creators (no spinner) while refreshing in the background', () => {
+			mockUseInfiniteCreatorMarketplace.mockReturnValue({
+				...baseHookReturn,
+				creators: [makeCreator('a'), makeCreator('b')],
+				isRefreshing: true,
+				isLoadingFirstPage: false,
+			});
+
+			render(<CreatorMarketplaceInfiniteList />);
+
+			expect(screen.queryByTestId('creator-marketplace-initial-skeleton')).not.toBeInTheDocument();
+			expect(screen.getAllByRole('article')).toHaveLength(2);
+		});
+	});
 });
diff --git a/src/hooks/__tests__/tradeCacheInvalidation.test.ts b/src/hooks/__tests__/tradeCacheInvalidation.test.ts
index 635d19d0..9d8ce2c1 100644
--- a/src/hooks/__tests__/tradeCacheInvalidation.test.ts
+++ b/src/hooks/__tests__/tradeCacheInvalidation.test.ts
@@ -6,6 +6,7 @@ import { renderHook, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { useTradeMutation } from '../useWallet';
+import { queryKeys } from '@/lib/queryKeys';
 
 vi.mock('@/utils/toast.util', () => ({
 	default: {
@@ -17,12 +18,14 @@ vi.mock('@/utils/toast.util', () => ({
 	},
 }));
 
-function createWrapper() {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
-	});
-	return function Wrapper({ children }: { children: React.ReactNode }) {
-		return React.createElement(QueryClientProvider, { client: queryClient }, children);
+function createWrapper(queryClient = new QueryClient({
+	defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+})) {
+	return {
+		queryClient,
+		Wrapper: function Wrapper({ children }: { children: React.ReactNode }) {
+			return React.createElement(QueryClientProvider, { client: queryClient }, children);
+		},
 	};
 }
 
@@ -32,8 +35,8 @@ describe('useTradeMutation cache invalidation log (#636)', () => {
 		process.env.NODE_ENV = 'development';
 		const debugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
 
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useTradeMutation('GWALLET'), { wrapper });
+		const { Wrapper } = createWrapper();
+		const { result } = renderHook(() => useTradeMutation('GWALLET'), { wrapper: Wrapper });
 
 		result.current.mutate({
 			creatorId: 'creator-1',
@@ -61,8 +64,8 @@ describe('useTradeMutation cache invalidation log (#636)', () => {
 	it('does not emit the log in test environment', async () => {
 		const debugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
 
-		const wrapper = createWrapper();
-		const { result } = renderHook(() => useTradeMutation('GWALLET'), { wrapper });
+		const { Wrapper } = createWrapper();
+		const { result } = renderHook(() => useTradeMutation('GWALLET'), { wrapper: Wrapper });
 
 		result.current.mutate({
 			creatorId: 'creator-2',
@@ -77,4 +80,30 @@ describe('useTradeMutation cache invalidation log (#636)', () => {
 
 		debugSpy.mockRestore();
 	});
+
+	it('invalidates the marketplace list cache after a trade settles (#691)', async () => {
+		const { queryClient, Wrapper } = createWrapper();
+
+		queryClient.setQueryData(queryKeys.creators.infiniteList(undefined), {
+			pages: [{ items: [], page: 1, hasMore: false }],
+			pageParams: [1],
+		});
+
+		const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+
+		const { result } = renderHook(() => useTradeMutation('GWALLET'), { wrapper: Wrapper });
+
+		result.current.mutate({
+			creatorId: 'creator-3',
+			amount: 2,
+			priceStroops: 250_000,
+			price: 0.03,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true), { timeout: 3000 });
+
+		expect(invalidateSpy).toHaveBeenCalledWith(
+			expect.objectContaining({ queryKey: queryKeys.creators.all }),
+		);
+	});
 });
diff --git a/src/hooks/__tests__/useInfiniteCreatorMarketplace.test.ts b/src/hooks/__tests__/useInfiniteCreatorMarketplace.test.ts
index 2b5869bb..377dba33 100644
--- a/src/hooks/__tests__/useInfiniteCreatorMarketplace.test.ts
+++ b/src/hooks/__tests__/useInfiniteCreatorMarketplace.test.ts
@@ -8,6 +8,7 @@ import React from 'react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { useInfiniteCreatorMarketplace } from '../useInfiniteCreatorMarketplace';
 import { courseService, type Course, type CoursesPage } from '@/services/course.service';
+import { queryKeys } from '@/lib/queryKeys';
 
 vi.mock('@/services/course.service', async () => {
 	const actual = await vi.importActual<typeof import('@/services/course.service')>(
@@ -127,4 +128,105 @@ describe('useInfiniteCreatorMarketplace', () => {
 
 		await waitFor(() => expect(mockGetCoursesPage).toHaveBeenCalledWith(1, params));
 	});
+
+	describe('stale-while-revalidate (#691)', () => {
+		it('serves cached data instantly (no first-page loading state) on remount within 60s', async () => {
+			mockGetCoursesPage.mockResolvedValue({
+				items: [makeCreator('a')],
+				page: 1,
+				hasMore: false,
+			});
+
+			const queryClient = new QueryClient({
+				defaultOptions: { queries: { retry: false } },
+			});
+			const wrapper = ({ children }: { children: React.ReactNode }) =>
+				React.createElement(QueryClientProvider, { client: queryClient }, children);
+
+			const first = renderHook(() => useInfiniteCreatorMarketplace(), { wrapper });
+			await waitFor(() => expect(first.result.current.isLoadingFirstPage).toBe(false));
+			first.unmount();
+
+			mockGetCoursesPage.mockClear();
+
+			const second = renderHook(() => useInfiniteCreatorMarketplace(), { wrapper });
+
+			// Cached data must be available immediately -- never a spinner state
+			// -- because the previous fetch is still within the 60s staleTime.
+			expect(second.result.current.isLoadingFirstPage).toBe(false);
+			expect(second.result.current.creators).toHaveLength(1);
+			expect(mockGetCoursesPage).not.toHaveBeenCalled();
+		});
+
+		it('reports isRefreshing while silently refetching stale data in the background', async () => {
+			mockGetCoursesPage.mockResolvedValue({
+				items: [makeCreator('a')],
+				page: 1,
+				hasMore: false,
+			});
+
+			const queryClient = new QueryClient({
+				defaultOptions: { queries: { retry: false } },
+			});
+			const wrapper = ({ children }: { children: React.ReactNode }) =>
+				React.createElement(QueryClientProvider, { client: queryClient }, children);
+
+			const { result } = renderHook(() => useInfiniteCreatorMarketplace(), { wrapper });
+			await waitFor(() => expect(result.current.isLoadingFirstPage).toBe(false));
+
+			expect(result.current.isRefreshing).toBe(false);
+
+			// Slow down the refetch so the transient "refreshing" window is
+			// actually observable instead of resolving synchronously.
+			let resolveRefetch!: (page: CoursesPage) => void;
+			mockGetCoursesPage.mockReturnValueOnce(
+				new Promise(resolve => {
+					resolveRefetch = resolve;
+				})
+			);
+
+			// Force the cached entry to be considered stale, then trigger a
+			// background refetch the way a remount-after-60s would.
+			queryClient.invalidateQueries({ queryKey: queryKeys.creators.infiniteList(undefined) });
+
+			await waitFor(() => expect(result.current.isRefreshing).toBe(true));
+			// Cached data must remain visible throughout -- no spinner regression.
+			expect(result.current.isLoadingFirstPage).toBe(false);
+			expect(result.current.creators).toHaveLength(1);
+
+			resolveRefetch({ items: [makeCreator('a')], page: 1, hasMore: false });
+			await waitFor(() => expect(result.current.isRefreshing).toBe(false));
+		});
+
+		it('does not set isRefreshing during the initial load or next-page fetch', async () => {
+			let resolveFirstPage!: (page: CoursesPage) => void;
+			mockGetCoursesPage.mockReturnValueOnce(
+				new Promise(resolve => {
+					resolveFirstPage = resolve;
+				})
+			);
+
+			const { result } = renderHook(() => useInfiniteCreatorMarketplace(), {
+				wrapper: createWrapper(),
+			});
+
+			expect(result.current.isRefreshing).toBe(false);
+			resolveFirstPage({ items: [makeCreator('a')], page: 1, hasMore: true });
+			await waitFor(() => expect(result.current.isLoadingFirstPage).toBe(false));
+			expect(result.current.isRefreshing).toBe(false);
+
+			let resolveNextPage!: (page: CoursesPage) => void;
+			mockGetCoursesPage.mockReturnValueOnce(
+				new Promise(resolve => {
+					resolveNextPage = resolve;
+				})
+			);
+
+			result.current.fetchNextPage();
+			await waitFor(() => expect(result.current.isFetchingNextPage).toBe(true));
+			expect(result.current.isRefreshing).toBe(false);
+
+			resolveNextPage({ items: [makeCreator('b')], page: 2, hasMore: false });
+		});
+	});
 });
diff --git a/src/hooks/useInfiniteCreatorMarketplace.ts b/src/hooks/useInfiniteCreatorMarketplace.ts
index 56dcfb66..a522dcb3 100644
--- a/src/hooks/useInfiniteCreatorMarketplace.ts
+++ b/src/hooks/useInfiniteCreatorMarketplace.ts
@@ -5,6 +5,10 @@ import { queryKeys } from '@/lib/queryKeys';
 
 const FIRST_PAGE = 1;
 
+// #691 — cached pages are served instantly and treated as fresh for this
+// long; a background refetch only kicks in once data is older than this.
+const MARKETPLACE_STALE_TIME_MS = 60_000;
+
 /**
  * Cursor-based (page-number) infinite pagination over the creator key
  * marketplace listing, backed by React Query's useInfiniteQuery (#685).
@@ -13,6 +17,11 @@ const FIRST_PAGE = 1;
  * paged fetches: only the first page loads initially, later pages fetch on
  * demand via `fetchNextPage` (wire this to a useInfiniteScroll sentinel),
  * and fetching stops once the last page reports `hasMore: false`.
+ *
+ * #691 — `staleTime` enables stale-while-revalidate: a cached list renders
+ * immediately (no spinner) on remount within 60s, while React Query silently
+ * refetches in the background once it's stale. `isRefreshing` distinguishes
+ * that silent background refetch from the initial (spinner-worthy) load.
  */
 export function useInfiniteCreatorMarketplace(params?: Omit<GetCoursesParams, 'page'>) {
 	const query = useInfiniteQuery({
@@ -20,6 +29,7 @@ export function useInfiniteCreatorMarketplace(params?: Omit<GetCoursesParams, 'p
 		queryFn: ({ pageParam }) => courseService.getCoursesPage(pageParam, params),
 		initialPageParam: FIRST_PAGE,
 		getNextPageParam: lastPage => (lastPage.hasMore ? lastPage.page + 1 : undefined),
+		staleTime: MARKETPLACE_STALE_TIME_MS,
 	});
 
 	// De-duplicate creators across pages by id -- a creator that shifts
@@ -43,6 +53,10 @@ export function useInfiniteCreatorMarketplace(params?: Omit<GetCoursesParams, 'p
 		hasMore: query.hasNextPage,
 		isLoadingFirstPage: query.isLoading,
 		isFetchingNextPage: query.isFetchingNextPage,
+		// True only while a background revalidation is in flight after data
+		// has already been shown once — never true during the very first,
+		// spinner-worthy load (that's isLoadingFirstPage).
+		isRefreshing: query.isFetching && !query.isLoading && !query.isFetchingNextPage,
 		fetchNextPage: query.fetchNextPage,
 		error: query.error,
 	};
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
index cabdf093..11400ffc 100644
--- a/src/hooks/useWallet.ts
+++ b/src/hooks/useWallet.ts
@@ -136,10 +136,19 @@ export function useTradeMutation(address: string) {
 			);
 		},
 		onSettled: (_data, _error, variables) => {
-			const invalidatedKeys = [queryKeys.wallet.holdings(address)];
+			// #691 — a completed buy/sell changes supply/price data backing the
+			// marketplace list, so its cache must not wait out the 60s
+			// staleTime; invalidate immediately regardless of the trade outcome.
+			const invalidatedKeys = [
+				queryKeys.wallet.holdings(address),
+				queryKeys.creators.all,
+			];
 			queryClient.invalidateQueries({
 				queryKey: queryKeys.wallet.holdings(address),
 			});
+			queryClient.invalidateQueries({
+				queryKey: queryKeys.creators.all,
+			});
 
 			if (process.env.NODE_ENV !== 'test') {
 				console.debug('[cache-invalidation]', {

From b9b0532c06f0d1fc5b60a38b63b8baf9955e4f64 Mon Sep 17 00:00:00 2001
From: David Ejere <ejeredavid2001@gmail.com>
Date: Tue, 28 Jul 2026 14:17:43 +0100
Subject: [PATCH 3/3] feat(perf): log page-load timing on marketplace and
 profile pages (#693)

Reworks useNavigationTiming to accept a page_name and read
performance.getEntriesByType('navigation')[0] after the page becomes
interactive, logging { page_name, ttfb, dcl, load_complete } via
console.info('[page-load-perf]', ...). Gated to import.meta.env.PROD
so it never fires in dev/test, debounced via a ref guard to exactly
one log per mount, and read asynchronously (after 'load') so it never
blocks rendering.

Moves the call site from App.tsx (global, every route) to HomePage
(marketplace) and CreatorDetailPage (creator profile) specifically,
per the issue's scope. The previous global hook lacked a production
gate and used different field names, so it didn't satisfy the ask.
---
 src/App.tsx                                   |   2 -
 .../__tests__/useNavigationTiming.test.ts     | 125 ++++++++++++++++++
 src/hooks/useNavigationTiming.ts              |  70 +++++-----
 src/pages/CreatorDetailPage.tsx               |   2 +
 src/pages/HomePage.tsx                        |   3 +
 5 files changed, 167 insertions(+), 35 deletions(-)
 create mode 100644 src/hooks/__tests__/useNavigationTiming.test.ts

diff --git a/src/App.tsx b/src/App.tsx
index 421867ac..a294013e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,14 +3,12 @@ import { useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { createBrowserRouter, RouterProvider } from 'react-router';
 import AppErrorBoundary from './components/common/AppErrorBoundary';
-import { useNavigationTiming } from './hooks/useNavigationTiming';
 import { routes } from './routes';
 import { useRouteChangeLogging } from './hooks/useRouteChangeLogging';
 
 const router = createBrowserRouter(routes);
 
 function App() {
-	useNavigationTiming();
 	useRouteChangeLogging();
 
 	useEffect(() => {
diff --git a/src/hooks/__tests__/useNavigationTiming.test.ts b/src/hooks/__tests__/useNavigationTiming.test.ts
new file mode 100644
index 00000000..2006ebc1
--- /dev/null
+++ b/src/hooks/__tests__/useNavigationTiming.test.ts
@@ -0,0 +1,125 @@
+/**
+ * Unit tests for useNavigationTiming — logs TTFB/DCL/load-complete via the
+ * Navigation Timing API after each mount of the marketplace and creator
+ * profile pages (#693).
+ */
+import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useNavigationTiming } from '../useNavigationTiming';
+
+function mockNavigationEntry(overrides: Partial<PerformanceNavigationTiming> = {}) {
+	const entry = {
+		requestStart: 10,
+		responseStart: 60,
+		startTime: 0,
+		domContentLoadedEventEnd: 200,
+		loadEventEnd: 350,
+		...overrides,
+	} as PerformanceNavigationTiming;
+
+	vi.spyOn(performance, 'getEntriesByType').mockReturnValue([entry]);
+	return entry;
+}
+
+describe('useNavigationTiming', () => {
+	let originalReadyState: string;
+
+	beforeEach(() => {
+		originalReadyState = document.readyState;
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+		vi.unstubAllEnvs();
+		Object.defineProperty(document, 'readyState', {
+			value: originalReadyState,
+			configurable: true,
+		});
+	});
+
+	function setProd(value: boolean) {
+		vi.stubEnv('PROD', value);
+	}
+
+	function setReadyState(value: DocumentReadyState) {
+		Object.defineProperty(document, 'readyState', { value, configurable: true });
+	}
+
+	it('does not log when not in production mode', () => {
+		setProd(false);
+		setReadyState('complete');
+		mockNavigationEntry();
+		const infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {});
+
+		renderHook(() => useNavigationTiming('marketplace'));
+
+		expect(infoSpy).not.toHaveBeenCalled();
+	});
+
+	it('logs ttfb, dcl, load_complete, and page_name in production mode', () => {
+		setProd(true);
+		setReadyState('complete');
+		mockNavigationEntry({
+			requestStart: 10,
+			responseStart: 60,
+			startTime: 0,
+			domContentLoadedEventEnd: 200,
+			loadEventEnd: 350,
+		});
+		const infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {});
+
+		renderHook(() => useNavigationTiming('marketplace'));
+
+		expect(infoSpy).toHaveBeenCalledWith('[page-load-perf]', {
+			page_name: 'marketplace',
+			ttfb: 50,
+			dcl: 200,
+			load_complete: 350,
+		});
+	});
+
+	it('logs after the load event when the document has not finished loading yet', () => {
+		setProd(true);
+		setReadyState('loading');
+		mockNavigationEntry();
+		const infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {});
+
+		renderHook(() => useNavigationTiming('creator_profile'));
+
+		expect(infoSpy).not.toHaveBeenCalled();
+
+		window.dispatchEvent(new Event('load'));
+
+		expect(infoSpy).toHaveBeenCalledWith(
+			'[page-load-perf]',
+			expect.objectContaining({ page_name: 'creator_profile' })
+		);
+	});
+
+	it('logs only once per mount even if the hook re-renders', () => {
+		setProd(true);
+		setReadyState('complete');
+		mockNavigationEntry();
+		const infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {});
+
+		const { rerender } = renderHook(({ page }) => useNavigationTiming(page), {
+			initialProps: { page: 'marketplace' },
+		});
+
+		rerender({ page: 'marketplace' });
+		rerender({ page: 'marketplace' });
+
+		expect(infoSpy).toHaveBeenCalledTimes(1);
+	});
+
+	it('does nothing when no navigation timing entry is available', () => {
+		setProd(true);
+		setReadyState('complete');
+		vi.spyOn(performance, 'getEntriesByType').mockReturnValue([]);
+		const infoSpy = vi.spyOn(console, 'info').mockImplementation(() => {});
+
+		renderHook(() => useNavigationTiming('marketplace'));
+
+		expect(infoSpy).not.toHaveBeenCalled();
+	});
+});
diff --git a/src/hooks/useNavigationTiming.ts b/src/hooks/useNavigationTiming.ts
index 83520258..79ae5000 100644
--- a/src/hooks/useNavigationTiming.ts
+++ b/src/hooks/useNavigationTiming.ts
@@ -1,56 +1,60 @@
 import { useEffect, useRef } from 'react';
-import { useLocation } from 'react-router';
 
-interface NavigationTiming {
-	route: string;
-	dom_content_loaded_ms: number;
-	load_event_ms: number;
-	time_to_first_byte_ms: number;
+export interface PageLoadTiming {
+	page_name: string;
+	ttfb: number;
+	dcl: number;
+	load_complete: number;
 }
 
-function readNavigationTiming(): {
-	timing: NavigationTiming;
-	startTime: number;
-} | null {
+function readNavigationTiming(pageName: string): PageLoadTiming | null {
 	const entries = performance.getEntriesByType('navigation');
 	if (!entries.length) return null;
 
 	const nav = entries[0] as PerformanceNavigationTiming;
 
 	return {
-		timing: {
-			route: window.location.pathname,
-			dom_content_loaded_ms: Math.round(
-				nav.domContentLoadedEventEnd - nav.startTime
-			),
-			load_event_ms: Math.round(nav.loadEventEnd - nav.startTime),
-			time_to_first_byte_ms: Math.round(
-				nav.responseStart - nav.requestStart
-			),
-		},
-		startTime: nav.startTime,
+		page_name: pageName,
+		ttfb: Math.round(nav.responseStart - nav.requestStart),
+		dcl: Math.round(nav.domContentLoadedEventEnd - nav.startTime),
+		load_complete: Math.round(nav.loadEventEnd - nav.startTime),
 	};
 }
 
-export function useNavigationTiming() {
-	const location = useLocation();
-	const loggedStartTime = useRef<number | null>(null);
+/**
+ * Logs page-load performance (TTFB / DOM Content Loaded / load complete) via
+ * the Navigation Timing API after the page becomes interactive (#693).
+ *
+ * - Production only (`import.meta.env.PROD`) — never fires in dev/test, so
+ *   it can't add noise or overhead to local development.
+ * - Debounced to exactly one log per mount via a ref guard, so re-renders
+ *   (state updates, prop changes) never produce duplicate logs.
+ * - Reads happen after `load` (or immediately if the page already finished
+ *   loading by the time this effect runs) and never block rendering — the
+ *   read + log is entirely async relative to the render path.
+ */
+export function useNavigationTiming(pageName: string) {
+	const hasLogged = useRef(false);
 
 	useEffect(() => {
+		if (!import.meta.env.PROD) return;
+		if (hasLogged.current) return;
+
 		function emit() {
-			const result = readNavigationTiming();
-			if (!result) return;
-			if (loggedStartTime.current === result.startTime) return;
+			if (hasLogged.current) return;
+			const timing = readNavigationTiming(pageName);
+			if (!timing) return;
 
-			loggedStartTime.current = result.startTime;
-			console.debug('[navigation-timing]', result.timing);
+			hasLogged.current = true;
+			console.info('[page-load-perf]', timing);
 		}
 
 		if (document.readyState === 'complete') {
 			emit();
-		} else {
-			window.addEventListener('load', emit, { once: true });
-			return () => window.removeEventListener('load', emit);
+			return;
 		}
-	}, [location]);
+
+		window.addEventListener('load', emit, { once: true });
+		return () => window.removeEventListener('load', emit);
+	}, [pageName]);
 }
diff --git a/src/pages/CreatorDetailPage.tsx b/src/pages/CreatorDetailPage.tsx
index d66981b6..d550687b 100644
--- a/src/pages/CreatorDetailPage.tsx
+++ b/src/pages/CreatorDetailPage.tsx
@@ -7,10 +7,12 @@ import { CreatorProfileHeaderSkeleton } from '@/components/common/CreatorSkeleto
 import { bpsToPercent } from '@/utils/numberFormat.utils';
 import CreatorPageErrorBoundary from '@/components/common/CreatorPageErrorBoundary';
 import { ApiError } from '@/services/api.service';
+import { useNavigationTiming } from '@/hooks/useNavigationTiming';
 
 function CreatorDetailPageContent() {
 	const { id } = useParams<{ id: string }>();
 	const { data: creator, isLoading, error } = useCreatorDetail(id || '');
+	useNavigationTiming('creator_profile');
 
 	if (isLoading) {
 		return (
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 93da8775..8c8806d7 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -3,8 +3,11 @@ import Footer from '../components/home/Footer';
 import Header from '../components/home/Header';
 import Hero from '../components/home/Hero';
 import TrendingCreators from '../components/home/TrendingCreators';
+import { useNavigationTiming } from '../hooks/useNavigationTiming';
 
 export default function HomePage() {
+	useNavigationTiming('marketplace');
+
 	return (
 		<>
 			<Header />