diff --git a/src/App.tsx b/src/App.tsx
index 421867a..a294013 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/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx
index 43c82eb..65781d5 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/CreatorMarketplaceInfiniteList.tsx b/src/components/common/CreatorMarketplaceInfiniteList.tsx
index e92a74f..9de6aac 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/SectionErrorBoundary.tsx b/src/components/common/SectionErrorBoundary.tsx
index 9749403..8e195b6 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__/CreatorMarketplaceInfiniteList.test.tsx b/src/components/common/__tests__/CreatorMarketplaceInfiniteList.test.tsx
index 6241286..3284bea 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/components/common/__tests__/SectionErrorBoundary.test.tsx b/src/components/common/__tests__/SectionErrorBoundary.test.tsx
index 9e024e3..3619138 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()
+		);
+	});
 });
diff --git a/src/hooks/__tests__/tradeCacheInvalidation.test.ts b/src/hooks/__tests__/tradeCacheInvalidation.test.ts
index 635d19d..9d8ce2c 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 2b5869b..377dba3 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/__tests__/useNavigationTiming.test.ts b/src/hooks/__tests__/useNavigationTiming.test.ts
new file mode 100644
index 0000000..2006ebc
--- /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/useInfiniteCreatorMarketplace.ts b/src/hooks/useInfiniteCreatorMarketplace.ts
index 56dcfb6..a522dcb 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/useNavigationTiming.ts b/src/hooks/useNavigationTiming.ts
index 8352025..79ae500 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/hooks/useWallet.ts b/src/hooks/useWallet.ts
index cabdf09..11400ff 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]', {
diff --git a/src/pages/CreatorDetailPage.tsx b/src/pages/CreatorDetailPage.tsx
index d66981b..d550687 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 93da877..8c8806d 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 />