diff --git a/.changeset/bible-reader-chapter-loading-overlay.md b/.changeset/bible-reader-chapter-loading-overlay.md new file mode 100644 index 00000000..3199d783 --- /dev/null +++ b/.changeset/bible-reader-chapter-loading-overlay.md @@ -0,0 +1,5 @@ +--- +'@youversion/platform-react-ui': patch +--- + +Improve the chapter-change loading experience in `BibleReader`/`BibleTextView`. Instead of pulsing the previous chapter's text while the next chapter loads, the outgoing text now fades to a low opacity in place (no layout shift) with a spinner overlaid and centered in the visible reading area. This avoids both the confusing stale-but-active text and the flash-of-empty-content a bare spinner would cause, and the opacity transition doubles as a smooth fade-in for the incoming chapter. diff --git a/packages/ui/src/components/verse.test.tsx b/packages/ui/src/components/verse.test.tsx index 8db161ae..2a8e0104 100644 --- a/packages/ui/src/components/verse.test.tsx +++ b/packages/ui/src/components/verse.test.tsx @@ -668,7 +668,7 @@ describe('BibleTextView - Refetch loading behavior', () => { ); await waitFor(() => { - const wrapper = container.querySelector('[data-yv-sdk]'); + const wrapper = container.querySelector('[aria-busy="true"]'); expect(wrapper).not.toBeNull(); expect((wrapper as HTMLElement).style.pointerEvents).toBe('none'); }); diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx index 3946e955..59938030 100644 --- a/packages/ui/src/components/verse.tsx +++ b/packages/ui/src/components/verse.tsx @@ -544,29 +544,47 @@ export const BibleTextView = forwardRef( ); } + // While the next chapter loads, usePassage keeps returning the previous + // passage. Fade it in place behind a spinner rather than clearing it (which + // would flash the layout). The spinner is sticky so it stays centered in view + // on long chapters. return ( -
- +
+
+ +
+ {currentLoading && ( +
+
+
+
+ )}
); },