diff --git a/resources/js/lib/useLazyProfileFavourites.js b/resources/js/lib/useLazyProfileFavourites.js
new file mode 100644
index 00000000..3181957f
--- /dev/null
+++ b/resources/js/lib/useLazyProfileFavourites.js
@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export default function useLazyProfileFavourites({ username, initialFavourites, enabled }) {
+ const hasInitialValue = initialFavourites !== null && initialFavourites !== undefined
+ const initialItems = Array.isArray(initialFavourites)
+ ? initialFavourites
+ : (initialFavourites?.data ?? [])
+ const [items, setItems] = useState(() => initialItems)
+ const [nextCursor, setNextCursor] = useState(() => initialFavourites?.next_cursor ?? null)
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState(false)
+ const requestKeyRef = useRef(username)
+ const requestedRef = useRef(hasInitialValue)
+ const abortRef = useRef(null)
+
+ useEffect(() => {
+ if (requestKeyRef.current === username) return undefined
+
+ abortRef.current?.abort()
+ abortRef.current = null
+ requestKeyRef.current = username
+ requestedRef.current = false
+ setItems([])
+ setNextCursor(null)
+ setLoading(false)
+ setError(false)
+ return undefined
+ }, [username])
+
+ useEffect(() => {
+ if (requestKeyRef.current !== username || !hasInitialValue) return undefined
+
+ abortRef.current?.abort()
+ abortRef.current = null
+ requestedRef.current = true
+ setItems(initialItems)
+ setNextCursor(initialFavourites?.next_cursor ?? null)
+ setLoading(false)
+ setError(false)
+ return undefined
+ }, [hasInitialValue, initialFavourites, initialItems, username])
+
+ const load = useCallback(async () => {
+ if (!enabled || hasInitialValue || requestedRef.current || !username) return
+
+ requestedRef.current = true
+ const controller = new AbortController()
+ const requestKey = requestKeyRef.current
+ abortRef.current = controller
+ setLoading(true)
+ setError(false)
+
+ try {
+ const response = await fetch(`/api/profile/${encodeURIComponent(username)}/favourites`, {
+ headers: { Accept: 'application/json' },
+ credentials: 'same-origin',
+ signal: controller.signal,
+ })
+ if (!response.ok) throw new Error('Favourites could not be loaded.')
+ const payload = await response.json()
+ if (requestKey !== requestKeyRef.current || controller.signal.aborted) return
+ setItems(Array.isArray(payload?.data) ? payload.data : [])
+ setNextCursor(payload?.next_cursor ?? null)
+ } catch (caught) {
+ if (caught?.name === 'AbortError' || requestKey !== requestKeyRef.current) return
+ requestedRef.current = false
+ setError(true)
+ } finally {
+ if (requestKey === requestKeyRef.current) {
+ abortRef.current = null
+ setLoading(false)
+ }
+ }
+ }, [enabled, hasInitialValue, username])
+
+ useEffect(() => {
+ if (enabled) load()
+ }, [enabled, load])
+
+ useEffect(() => () => abortRef.current?.abort(), [])
+
+ return { items, nextCursor, loading, error, retry: load }
+}
diff --git a/resources/js/lib/useLazyProfileFavourites.test.jsx b/resources/js/lib/useLazyProfileFavourites.test.jsx
new file mode 100644
index 00000000..20315653
--- /dev/null
+++ b/resources/js/lib/useLazyProfileFavourites.test.jsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import useLazyProfileFavourites from './useLazyProfileFavourites'
+
+function Harness({ username = 'alice', initial = null, enabled = false }) {
+ const state = useLazyProfileFavourites({
+ username,
+ initialFavourites: initial,
+ enabled,
+ })
+
+ return
+}
+
+describe('useLazyProfileFavourites', () => {
+ beforeEach(() => {
+ vi.restoreAllMocks()
+ })
+
+ it('does not request before activation and requests page one once on activation', async () => {
+ const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+ ok: true,
+ json: async () => ({ data: [{ id: 1 }], next_cursor: 'c1' }),
+ })
+ const view = render()
+
+ expect(fetchMock).not.toHaveBeenCalled()
+ view.rerender()
+
+ await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+ expect(fetchMock).toHaveBeenCalledWith('/api/profile/alice/favourites', expect.objectContaining({
+ credentials: 'same-origin',
+ }))
+ })
+
+ it('uses SSR data without a page-one request and survives rerenders', async () => {
+ const fetchMock = vi.spyOn(globalThis, 'fetch')
+ const view = render()
+ view.rerender()
+
+ await waitFor(() => expect(JSON.parse(view.getByTestId('state').textContent).items).toEqual([{ id: 9 }]))
+ expect(fetchMock).not.toHaveBeenCalled()
+ })
+
+ it('does not refetch after switching away and back', async () => {
+ const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+ ok: true,
+ json: async () => ({ data: [{ id: 3 }], next_cursor: null }),
+ })
+ const view = render()
+ await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+
+ view.rerender()
+ view.rerender()
+ await waitFor(() => expect(JSON.parse(view.getByTestId('state').textContent).items).toEqual([{ id: 3 }]))
+ expect(fetchMock).toHaveBeenCalledTimes(1)
+ })
+
+ it('resets profile state and ignores a stale response', async () => {
+ let resolveRequest
+ const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(() => new Promise((resolve) => {
+ resolveRequest = resolve
+ }))
+ const view = render()
+ await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1))
+
+ view.rerender()
+ expect(JSON.parse(view.getByTestId('state').textContent).items).toEqual([])
+ resolveRequest({ ok: true, json: async () => ({ data: [{ id: 1 }], next_cursor: null }) })
+
+ await waitFor(() => expect(JSON.parse(view.getByTestId('state').textContent).items).toEqual([]))
+ })
+})
diff --git a/tests/Feature/Profile/ProfileFavouritesLazyTest.php b/tests/Feature/Profile/ProfileFavouritesLazyTest.php
new file mode 100644
index 00000000..d913335f
--- /dev/null
+++ b/tests/Feature/Profile/ProfileFavouritesLazyTest.php
@@ -0,0 +1,74 @@
+create(['username' => 'lazyfavourites']);
+ $artworks = Artwork::factory()->count(13)->for($user)->create();
+
+ foreach ($artworks as $index => $artwork) {
+ DB::table('artwork_favourites')->insert([
+ 'user_id' => $user->id,
+ 'artwork_id' => $artwork->id,
+ 'created_at' => now()->subMinutes($index),
+ 'updated_at' => now()->subMinutes($index),
+ ]);
+ }
+
+ return [$user, $artworks];
+}
+
+it('skips the favourites producer on the default Posts SSR request', function (): void {
+ [$user] = profileFavouritesFixture();
+ DB::flushQueryLog();
+ DB::enableQueryLog();
+
+ $this->get('/@' . $user->username)
+ ->assertOk()
+ ->assertInertia(fn (AssertableInertia $page) => $page
+ ->where('initialTab', 'posts')
+ ->where('favourites', null));
+
+ expect(collect(DB::getQueryLog())->pluck('query')->filter(fn (string $query): bool => str_contains(strtolower($query), 'artwork_favourites'))->all())->toBe([]);
+});
+
+it('keeps the first favourites page in direct SSR with the existing cursor contract', function (): void {
+ [$user, $artworks] = profileFavouritesFixture();
+
+ $this->get('/@' . $user->username . '/favourites')
+ ->assertOk()
+ ->assertInertia(fn (AssertableInertia $page) => $page
+ ->where('initialTab', 'favourites')
+ ->where('favourites.next_cursor', base64_encode('12'))
+ ->where('favourites.data.0.id', $artworks->first()->id));
+});
+
+it('returns the same ordered twelve-item page and continues with the next cursor', function (): void {
+ [$user, $artworks] = profileFavouritesFixture();
+ $expected = $artworks->values();
+
+ $first = $this->getJson('/api/profile/' . $user->username . '/favourites')
+ ->assertOk()
+ ->assertJsonCount(12, 'data')
+ ->assertJsonPath('data.0.id', $expected[0]->id)
+ ->assertJsonPath('next_cursor', base64_encode('12'));
+
+ $this->getJson('/api/profile/' . $user->username . '/favourites?cursor=' . urlencode($first->json('next_cursor')))
+ ->assertOk()
+ ->assertJsonCount(1, 'data')
+ ->assertJsonPath('data.0.id', $expected[12]->id)
+ ->assertJsonPath('next_cursor', null);
+});
+
+it('does not increment profile views for the lazy favourites endpoint', function (): void {
+ [$user] = profileFavouritesFixture();
+ $before = (int) $user->profile_views_count;
+
+ $this->getJson('/api/profile/' . $user->username . '/favourites')->assertOk();
+
+ expect((int) $user->fresh()->profile_views_count)->toBe($before);
+});