Projects › BibleWeb › Navigation UX › Auto-save every 30 seconds
Planned

Auto-save every 30 seconds

Area: Navigation UX

Context

Problem: Users worry about losing their reading position, font size, and theme preferences if their browser crashes or they accidentally close the tab. While settings are already saved on change, the reading position (current book and chapter) should also be preserved automatically.

Solution: A periodic auto-save (every 30 seconds) that captures the current reading position, font size, and theme to localStorage. On next visit, the app can restore exactly where the user left off.

Not included: Cloud sync of reading position or cross-device resume. This is localStorage only.

Functional

Expected behavior:

  1. User reads the Bible — their position is saved every 30 seconds
  2. User closes the browser or navigates away
  3. On next visit, the app opens to the last-read chapter
  4. Font size and theme are also restored (these may already be saved on change)

What's auto-saved:

  • Reading position: current bookId and chapter
  • Font size (may already be covered by existing save-on-change)
  • Theme (may already be covered by existing save-on-change)

Edge cases:

  • First visit: no saved position → defaults to Genesis 1
  • Settings already save on change — auto-save is a safety net for reading position
  • 30-second interval chosen to balance between responsiveness and performance

TODO: Verify which settings are already saved on change vs which need periodic saving

UX & Design

No UI — auto-save is invisible to the user. They simply find their position restored on next visit.

Technical

Implementation:

  • setInterval in the reader page component, every 30,000ms
  • Save {bookId, chapter} to localStorage under a lastPosition key
  • On reader mount, check for saved position and navigate if present
  • Clear interval on component unmount

TODO: Check what's already implemented — the reader may already partially do this

Files:

  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.svelte (modify)
  • apps/web/src/lib/stores/settings.svelte.ts (may already handle some of this)

Status

Current: PLANNED Milestone: Foundation Priority: Low — most settings already save on change, this is a safety net

History:

  • Partially implemented — settings already persist on change
  • The auto-save interval is the missing piece for reading position

Dependencies:

  • Requires: settings store (DONE), reader (DONE)
← Back to Navigation UX features