reader: fix spinner stuck forever on slow first page-image load

[ajslater]

Summary

The reader page wrapper used a v-else-if / v-else chain that made LoadingPage and the image component mutually exclusive. When the 333ms mounted() timer flipped showProgress=true, Vue swapped to LoadingPage — destroying the <img> element along with its @load listener. Any response arriving after that landed on a torn-down element, loaded never flipped, and the spinner stuck forever.

The fix renders <component> and LoadingPage as siblings under v-else with v-show toggling component visibility instead of v-if. The component stays mounted across the spinner transition, the @load handler is still wired when the response lands, and the visible behaviour matches the previous template at each state.

Why it only repro'd in production

The bug needs the page-image request to cross 333ms.

• Local make dev-server / make dev-prod-server → API on localhost, request returns well under 333ms → swap never fires → no repro.
• Production (Docker behind nginx/swag), cold caches → first request to /api/v3/c/<pk>/<page>/page.jpg crosses 333ms → swap fires → <img> unmounts mid-flight.

The reproducer's other quirks fall out cleanly:

• Force refresh fixes it → image is now in the browser disk cache → next attempt loads in <333ms.
• Closing & reopening the same book fixes it → same browser cache hit.

Confirmed via DOM inspection on a stuck instance

> document.querySelectorAll('#booksWindow .img').length
1
> document.querySelectorAll('#booksWindow .pageLoading').length
2
> document.querySelector('#booksWindow .page')?.innerHTML?.slice(0, 200)
'<div ... class="pageLoading">…</div>'

The current page's <img> is gone; only the spinner remains.

Behavior matrix (unchanged externally)

state	image visible?	spinner visible?
0 – 333 ms (loading)	yes	no
> 333 ms still loading	hidden	yes
onLoad → loaded=true	yes	unmounted
error	unmounted	unmounted (ErrorPage shown)

Test plan

• bun run build (frontend) clean
• bun run test:ci (vitest) passes
• eslint + prettier clean for the changed file
• Verify against the production Docker build: open a book that previously stuck, watch the spinner appear briefly, then the page render once the image lands.
• Sanity: open a book on a fast localhost (make dev-prod-server), confirm no visible spinner flash on cached-image second open, normal spinner on first slow open.

🤖 Generated with Claude Code