fabi/Mangalord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: grid skeletons on the author and collection detail pages

Browse Source 
Both loaders now stream their manga grid instead of blocking on it: the cheap
header renders immediately (and still handles 404/401 in the loader) while a
MangaGridSkeleton stands in until the grid resolves, then swaps in without a
layout shift. Collection detail seeds its optimistic-removal state from the
stream via a guarded effect.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-06 22:01:53 +02:00
parent ec73c6e001
commit cee1e73f98
9 changed files with 226 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/e2e/author-page.spec.ts Normal file
View File

@@ -0,0 +1,66 @@
import { test, expect, type Page } from './fixtures';
// The author page streams its manga grid: the cheap author header renders
// immediately while the (potentially large) grid shows a skeleton, then swaps
// in without a layout shift.
const authorId = 'a1111111-1111-1111-1111-111111111111';
async function mockCommon(page: Page) {
await page.route('**/api/v1/auth/config', (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ self_register_enabled: true, private_mode: false })
})
);
await page.route('**/api/v1/auth/me', (r) =>
r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
);
await page.route('**/api/v1/auth/me/preferences', (r) =>
r.fulfill({ status: 401, contentType: 'application/json', body: '{"error":{"code":"x","message":"x"}}' })
);
await page.route(`**/api/v1/authors/${authorId}`, (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ id: authorId, name: 'Kentaro Miura', manga_count: 1 })
})
);
}
test('shows a grid skeleton while the author mangas stream, then the grid', async ({ page }) => {
await mockCommon(page);
let release: () => void = () => {};
const gate = new Promise<void>((resolve) => {
release = resolve;
});
await page.route(`**/api/v1/authors/${authorId}/mangas*`, async (route) => {
await gate;
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
items: [
{
id: 'm1', title: 'Berserk', status: 'ongoing', alt_titles: [], description: null,
cover_image_path: null, created_at: '2026-01-01T00:00:00Z', updated_at: '2026-01-01T00:00:00Z'
}
],
page: { limit: 50, offset: 0, total: 1 }
})
});
});
await page.goto(`/authors/${authorId}`);
// Header renders immediately (not blocked on the grid).
await expect(page.getByTestId('author-name')).toHaveText('Kentaro Miura');
// Grid skeleton stands in while the stream is pending.
await expect(page.getByTestId('manga-grid-skeleton')).toBeVisible();
await expect(page.getByTestId('author-manga-list')).toHaveCount(0);
release();
await expect(page.getByTestId('author-manga-list')).toContainText('Berserk');
await expect(page.getByTestId('manga-grid-skeleton')).toHaveCount(0);
});

67
frontend/e2e/collection-detail-skeleton.spec.ts Normal file
View File

@@ -0,0 +1,67 @@
import { test, expect, type Page } from './fixtures';
// The collection detail page streams its manga/page grids: the header renders
// immediately while a grid skeleton stands in, then the real grid swaps in.
const collectionId = 'd1111111-1111-1111-1111-111111111111';
async function mockCommon(page: Page) {
await page.route('**/api/v1/auth/config', (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ self_register_enabled: true, private_mode: false })
})
);
await page.route('**/api/v1/auth/me', (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ user: { id: 'u1', username: 'reader', created_at: '2026-01-01T00:00:00Z', is_admin: false } })
})
);
await page.route('**/api/v1/auth/me/preferences', (r) =>
r.fulfill({ status: 200, contentType: 'application/json', body: '{}' })
);
await page.route(`**/api/v1/collections/${collectionId}`, (r) =>
r.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ id: collectionId, name: 'Favourites', description: null, manga_count: 1 })
})
);
await page.route(`**/api/v1/collections/${collectionId}/pages*`, (r) =>
r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 200, offset: 0, total: 0 } }) })
);
}
test('streams a grid skeleton on the collection detail then the manga grid', async ({ page }) => {
await mockCommon(page);
let release: () => void = () => {};
const gate = new Promise<void>((resolve) => {
release = resolve;
});
await page.route(`**/api/v1/collections/${collectionId}/mangas*`, async (route) => {
await gate;
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
items: [
{ id: 'm1', title: 'Berserk', status: 'ongoing', alt_titles: [], description: null, cover_image_path: null, created_at: '2026-01-01T00:00:00Z', updated_at: '2026-01-01T00:00:00Z' }
],
page: { limit: 200, offset: 0, total: 1 }
})
});
});
await page.goto(`/collections/${collectionId}`);
await expect(page.getByRole('heading', { name: 'Favourites' })).toBeVisible();
await expect(page.getByTestId('manga-grid-skeleton')).toBeVisible();
await expect(page.getByTestId('collection-manga-list')).toHaveCount(0);
release();
await expect(page.getByTestId('collection-manga-list')).toContainText('Berserk');
await expect(page.getByTestId('manga-grid-skeleton')).toHaveCount(0);
});