[dylanjeffers]

Follow-up to the bundle/startup series (#14660–#14673). That series was about bundle size; this one is about runtime work on web and mobile: re-renders, request waterfalls, polling, fonts and image sizes. One commit per area. Everything is JS-only and OTA-safe.

1. Web: fonts

Web shipped Avenir twice as base64 CSS, about 240 KB each time: once through harmony's avenir.css in the entry CSS, and again in public/fonts.css.

• Separate woff2 files: public/fonts.css now points at six woff2 files, the same bytes decoded from the base64, with font-display: swap.
• Preloads: index.html preloads Medium, DemiBold and Bold, about 90 KB.
• Inlined copy removed from web only: a Vite plugin drops harmony's inlined copy from the web build. Web imports harmony from source, so the plugin covers both src/.../avenir.css and dist/harmony.css. Other harmony consumers are unchanged.
• Landing hero font: the 2026 landing hero waits on Dust Bucer, which now loads as woff2: 284 KB → 111 KB. Outlines, kern and GPOS are identical; only hinting is dropped.
• Result: entry CSS goes from 379 KB / 212 KB gzip to 137 KB / 27 KB gzip. fonts.css goes from 242 KB to 1.3 KB.

2. Web: app shell and play bar

• App shell: the playback rate and position hooks moved from WebPlayer into a leaf PlaybackPersistence. Play/pause, track changes and the 1s podcast position ticks no longer re-render every route, the nav and the modals.
• Podcast position saves: localStorage writes are batched to one per 5s, and flushed on pause, track change, pagehide and hidden tab.
• Desktop PlayBar and NowPlaying: they re-render only when the displayed second changes. Before, they re-rendered every 500ms forever and re-bound the hotkeys each time.
• Mobile-web PlayBar: it used to create a new interval on every render. The progress bar now owns its own interval.

3. Web: first visit

PersistGate held the whole app until a dynamic localforage import and an IndexedDB read finished, for every new visitor.

• Fix: it checks indexedDB.databases() first and skips localforage when that database doesn't exist.

4. Web + mobile: lineups

• togglePlay: reads playback state at press time, so play/pause/skip no longer rebuild every lineup tile. Tiles already select their own playing state.
• Lineup hooks: they memoize trackIds, and the new useLoadNextPage keeps loadNextPage stable. This also stops the load-more IntersectionObserver being recreated on every render.
• Library: library selectors use createSelector; the library page had been re-rendering on every redux action.
• Smaller fixes:
  • useToggleTrack (explore tiles, chat unfurls) selects a single boolean.
  • Mobile lineups use windowSize 11.

5. Shared data hooks

• useCurrentAccount: placeholderData used to re-parse the cached account from localStorage in every observer on every render while the account loaded, and for the whole session when signed out. The parsed result is now reused until the stored strings change.
• Batched entity hooks: useTracks, useUsers and useCollections memoize their queries array.
• Track page lineup: the remix parent/remixes, more-by-artist and trending requests run in parallel (3 round trips → 1). Section order and dedupe are unchanged.
• Track rank: trending IDs use a 30-minute staleTime instead of 5 minutes.
• Profile page: an artist's reposts are fetched only when the Reposts tab opens. Until the profile is known, reposts still load in parallel.
• Mobile:
  • the offline-downloads persist is throttled to 1s
  • ChatScreen no longer renders every cached message on mount

6. Mobile: audio queue and images

• Queue URL checks: starting playback used to check the stream and 1000px artwork of every queued track against mirrors, about 2N HEAD requests, competing with the track that was buffering.
  • Now only the start track, the one before it and the next 2 are checked. The rest, and appended tracks, use their primary URLs.
  • If a primary URL fails, the existing PlaybackError handler re-resolves that track and skips the primary.
  • Offline and gated tracks are unchanged.
• useImageSize: reads preloadImageFn from a ref, so inline callers no longer re-run the effect and prefetch on every render. A cached larger image is used only up to 3.5× the requested width.
• Artwork sizes:
  • the collapsed Now Playing drawer loads 480px artwork, and 1000px once opened
  • feed collection tiles use 150px, like track tiles

Not done

• Collection page virtualization: the virtualized table turns off column sorting, and that page needs sorting and drag-reorder.
• Removing the JS image preload on web: only useProfilePicture wires onError, so the preload is the only mirror fallback for track and collection art.
• tanstack focusManager/onlineManager on mobile: the retryer pauses while unfocused, so a failed fetch during background playback or CarPlay would hang.
• useHotKeys throttle: a throttle that actually applied would skip preventDefault on dropped keydowns, so the page would scroll.
• Drawer gestures on reanimated, and reanimated scroll handlers: these are bigger refactors.

Test plan

• tsc for common, web and mobile; eslint on changed files
• common vitest: api and useImageSize, 34 passed
• web vitest: persistStorage, lineup, library, collection, track, accessibility
• mobile jest: 64/64 tests pass. App-test.tsx fails to resolve ~/api/tan-query/utils, and fails the same way on main.
• Prod web build: no Avenir @font-face left in any CSS asset
• Fonts:
  • Avenir renders on web and in the desktop app with no visible flash on a cold load
  • the landing hero appears quickly
• Desktop play bar:
  • elapsed time ticks
  • scrubbing while paused updates the time
  • ←/→ prev/restart, and ±15s on podcasts
  • space toggles play
• Mobile web: play bar progress moves, freezes on pause and resets on track change. Podcast resume after a reload lands within about 1s.
• Lineups: play/pause tiles on trending, feed, profile and library, on web and mobile. The highlight and speaker icon follow, and infinite scroll still loads.
• Explore and chat track tiles: play state is correct
• Library: a removed item disappears; the All category merges reposts, favorites and purchases
• Track page: more-by, remixes and recommended sections are correct for a remix, a track with remixes and a track with none
• Profile page:
  • artist: Tracks loads, Reposts loads on click, and /handle/reposts deep links
  • non-artist: Reposts shows
• First visit: a fresh profile renders; an existing user's search history survives
• Mobile playback:
  • start a long lineup or 500+ track playlist: playback is fast and auto-advances
  • rapid skips; shuffle; repeat all and repeat one
  • load more while the last track plays
  • offline collection in airplane mode
  • gated and purchased tracks, and previews
  • lock-screen artwork updates
• Mobile Now Playing: opening the drawer sharpens the artwork without a flash
• Mobile chat: a long chat with unread messages jumps to the unread tag

🤖 Generated with Claude Code

https://claude.ai/code/session_01DmUrAQMioSmE4rsEgLPEQL

[changeset-bot]

⚠️ No Changeset found

Latest commit: c32651a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR