Andrei 218d94107d Fix Bible reader page jumping and layout stability issues ...

Layout Stability Improvements:
- Add consistent minHeight (60vh) to content containers to prevent layout shifts
- Implement sticky navigation bar with smooth transitions
- Position loading spinner absolutely to prevent content jumping
- Add smooth opacity transitions during content loading

Content Loading Enhancements:
- Preserve previous verses during loading to prevent content flashing
- Display previous verse count during transitions for visual continuity
- Use requestAnimationFrame and setTimeout for smoother state transitions
- Implement content fade-in effects with reduced opacity during loading

Scroll Position Management:
- Store scroll position before loading new content
- Restore scroll position after content loads (maintains reading flow)
- Smart scroll restoration that only applies when not navigating to specific verse
- Prevent scroll jumping during chapter transitions

User Experience Improvements:
- Eliminate page "jumping" between chapter transitions
- Remove container resizing issues that disrupted reading flow
- Provide professional, book-like reading experience
- Maintain visual continuity during all navigation actions
- Smooth loading states with professional transitions

Technical Implementation:
- Add previousVerses state for content continuity
- Implement position: sticky for navigation stability
- Use CSS transitions for smooth visual effects
- Optimize loading timing with requestAnimationFrame
- Maintain consistent container dimensions throughout app lifecycle

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-09-24 20:31:34 +00:00

42 KiB

Raw Blame History

View Raw