bvandeusen
56cc253009
The 5×10 metadata batching only staggered the cheap layer (JSON); thumbnails load as independent <img> requests and clustered, so tiles "popped in together" after a wait. Two changes: - GalleryItem reveals each tile when ITS OWN thumbnail fires @load (with an onMounted complete-check for cached thumbs), playing a showcase-style flip-up entrance. Tiles now cascade in natural load order instead of all at once. Honors prefers-reduced-motion. - gallery store does ONE initial fetch (limit=50) instead of 10 serial /scroll round-trips. Fewer RTTs, faster first paint; the reveal-on-load is what makes appearance progressive now. Infinite scroll pulls 25/trigger. Tests: GalleryItem gains is-loaded only after @load; loadInitial issues exactly one scroll request at the initial limit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
29 lines
984 B
JavaScript
29 lines
984 B
JavaScript
// @vitest-environment happy-dom
|
|
import { describe, it, expect } from 'vitest'
|
|
|
|
import GalleryItem from '../../src/components/gallery/GalleryItem.vue'
|
|
import { freshPinia, mountComponent } from '../support/mountComponent.js'
|
|
|
|
describe('GalleryItem', () => {
|
|
const image = {
|
|
id: 7, sha256: 'a'.repeat(64), mime: 'image/jpeg',
|
|
width: 100, height: 100,
|
|
thumbnail_url: '/images/thumbs/aa/abc.jpg', artist: null,
|
|
}
|
|
|
|
it('reveals the thumbnail only once it has loaded, so tiles fade in individually', async () => {
|
|
const pinia = freshPinia()
|
|
const w = mountComponent(GalleryItem, { props: { image }, pinia })
|
|
const img = w.find('img')
|
|
expect(img.exists()).toBe(true)
|
|
|
|
// Pre-load: the tile must NOT be revealed, so it can fade in when its
|
|
// own thumbnail lands rather than pop together with its API batch.
|
|
expect(img.classes()).not.toContain('is-loaded')
|
|
|
|
await img.trigger('load')
|
|
|
|
expect(img.classes()).toContain('is-loaded')
|
|
})
|
|
})
|