YPE-1143: Mitigate BibleCard UI page shifting by cameronapak · Pull Request #177 · youversion/platform-sdk-react

cameronapak · 2026-02-27T17:23:04Z

More info can be found in https://lifechurch.atlassian.net/browse/YPE-1143

Plz watch video demo first (1min)

Supporting SMOL video

CleanShot.2026-02-27.at.11.31.53.mp4

Replace static loading text with a spinning loader icon when book title is not yet available. This improves the user experience by providing a more visually clear indication that content is being fetched.

made it possible for the Bible text view to animate in height so that changes aren't jarring in the Bible card whenever it loads fully.

Add a pulse animation to the BibleTextView when content is loading. This improves the user experience by providing visual feedback during data fetching.

Refactors the `AnimatedHeight` component to use `offsetHeight` for more accurate height calculations. Also updates the Tailwind transition timing function to `ease-out` for a smoother animation.

changeset-bot · 2026-02-27T17:23:07Z

🦋 Changeset detected

Latest commit: f345af0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-ui	Patch
@youversion/platform-react-hooks	Patch
@youversion/platform-core	Patch
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

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

…er loading state - Add role="status" and aria-label="Loading" to LoaderIcon for accessibility - Update bible-card and verse tests to use getByRole queries instead of CSS class selectors - Fix verse story to properly await loading assertion Amp-Thread-ID: https://ampcode.com/threads/T-019ca029-6aeb-73f2-970f-b06ef26ca45f Co-authored-by: Amp <amp@ampcode.com>

chatgpt-codex-connector · 2026-02-27T17:38:49Z

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

cameronapak · 2026-02-27T17:39:02Z

@greptileai, please review this PR

greptile-apps · 2026-02-27T17:42:52Z

Greptile Summary

This PR successfully mitigates UI page shifting in BibleCard by implementing smooth height transitions and improved loading states. The solution introduces a new AnimatedHeight component that uses ResizeObserver for automatic height tracking with CSS transitions, and a useDelayedLoading hook that prevents spinner flashing by delaying its appearance for 250ms during refetches.

Key improvements:

New AnimatedHeight component with ResizeObserver and motion-reduce support
Delayed loading spinner (250ms) prevents UI flashing during quick refetches
Old content remains visible during refetch instead of showing spinner
LoaderIcon now has proper accessibility attributes (role="status", aria-label)
Comprehensive test coverage for delayed spinner and refetch behavior
Consistent loading UX across BibleCard and BibleReader components

Technical implementation:

useDelayedLoading hook properly cleans up timers to prevent memory leaks
AnimatedHeight properly cleans up ResizeObserver on unmount
Loading states correctly differentiate between initial load (show spinner) vs refetch (show old content + small spinner)
Previous error handling issue from review thread has been fixed (now only checks currentError)

All changes follow project conventions, respect package boundaries, maintain unified versioning, and include proper test coverage.

Confidence Score: 5/5

This PR is safe to merge with no issues found
The implementation is clean, well-tested, and follows all project conventions. Timer cleanup and ResizeObserver cleanup are properly handled. The error handling issue from previous reviews has been resolved. All accessibility requirements are met with proper ARIA attributes. The changeset correctly includes all three packages following unified versioning rules.
No files require special attention

Important Files Changed

Filename	Overview
packages/ui/src/components/animated-height.tsx	New component for smooth height transitions using ResizeObserver and CSS transitions with motion-reduce support
packages/ui/src/components/bible-card.tsx	Added delayed loading spinner (250ms) and AnimatedHeight wrapper to prevent UI flashing during refetch
packages/ui/src/components/verse.tsx	Updated to show old content during refetch instead of spinner, with pulse animation and disabled interactions
packages/ui/src/components/icons/loader.tsx	Added role="status" and aria-label="Loading" for accessibility

_{Last reviewed commit: fa2afe8}

greptile-apps

_{10 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

packages/ui/src/components/verse.tsx

Adjusted the `BibleCard` component's styling to remove an unnecessary gap between the header and the main content, and added a bottom margin to the header section for better visual separation.

Only render `VerseUnavailableMessage` if `currentError` exists. Previously, it would also render if `fetchedError` existed, leading to an incorrect UI state.

cameronapak · 2026-02-27T18:10:55Z

@greptileai, based on your latest review, please go and update your initial review. ty ty ty

cameronapak · 2026-03-02T18:11:17Z

@mic-mart would you be willing to review this PR if no one else can get to it?

mic-mart

Overall

Nice work — this is a solid, well-tested approach to mitigating layout shift. The patterns here (stale-while-revalidate display, delayed spinner, ResizeObserver-based height animation) are all industry-standard best practices. Performance looks good: ResizeObserver avoids layout thrashing, animate-pulse is CSS-only, and timer cleanup is correct. Accessibility is in good shape with role="status", aria-label, and motion-reduce:transition-none.

A few optional suggestions inline — all non-blocking nits.

packages/ui/src/components/animated-height.tsx

packages/ui/src/components/icons/loader.tsx

packages/ui/src/components/verse.tsx

packages/ui/src/components/bible-card.tsx

packages/ui/src/components/verse.stories.tsx

- Initialize AnimatedHeight with 'auto' instead of 0 to prevent flash-from-zero on mount - Add aria-busy attribute to verse wrapper during refetch for assistive tech - Add aria-hidden to LoaderIcon inside version picker button to prevent duplicate announcements Amp-Thread-ID: https://ampcode.com/threads/T-019cb0c7-af0a-7229-8a84-4345c6625fdc Co-authored-by: Amp <amp@ampcode.com>

cameronapak · 2026-03-02T23:05:48Z

@mic-mart ready for re-review or for final review

mic-mart

LGTM! Thanks for nit-picking so quickly.

cameronapak added 10 commits February 26, 2026 13:12

feature: adding better loading state to BibleCard

c8748fb

Clean up code

347777f

test: add BibleCard spinner tests and document verse.test mock necessity

af12eef

Refactor bible reader title to show loader

805ba38

Replace static loading text with a spinning loader icon when book title is not yet available. This improves the user experience by providing a more visually clear indication that content is being fetched.

feat(BibleCard): enable full screen in stories

949bb8c

feat: improve loading states

403a783

feat(bible-card): animate Bible text view height

bd02aa0

made it possible for the Bible text view to animate in height so that changes aren't jarring in the Bible card whenever it loads fully.

Fix: Add loading state to BibleTextView

fcb6d7c

Add a pulse animation to the BibleTextView when content is loading. This improves the user experience by providing visual feedback during data fetching.

fix(verse): display proper errors when verse is not fetched or has error

1ab206a

Fix: Improve animated height component

ff627c8

Refactors the `AnimatedHeight` component to use `offsetHeight` for more accurate height calculations. Also updates the Tailwind transition timing function to `ease-out` for a smoother animation.

cameronapak and others added 2 commits February 27, 2026 11:37

Added changeset

b428581

cameronapak marked this pull request as ready for review February 27, 2026 17:38

greptile-apps bot reviewed Feb 27, 2026

View reviewed changes

packages/ui/src/components/verse.tsx Outdated Show resolved Hide resolved

cameronapak added 2 commits February 27, 2026 11:45

Refactor BibleCard spacing and layout

b432f8d

Adjusted the `BibleCard` component's styling to remove an unnecessary gap between the header and the main content, and added a bottom margin to the header section for better visual separation.

feat(ui): add accessible loading attributes to spinner

4869290

cameronapak self-assigned this Feb 27, 2026

cameronapak added 2 commits February 27, 2026 11:59

Fix: Handle verse loading error correctly

f090cfa

Only render `VerseUnavailableMessage` if `currentError` exists. Previously, it would also render if `fetchedError` existed, leading to an incorrect UI state.

Fix: Remove unnecessary height style from BibleCard

fa2afe8

cameronapak requested review from Kyleasmth, bmanquen and camrun91 February 27, 2026 18:11

mic-mart reviewed Mar 2, 2026

View reviewed changes

mic-mart previously approved these changes Mar 2, 2026

View reviewed changes

cameronapak dismissed mic-mart’s stale review via f345af0 March 2, 2026 23:03

cameronapak requested a review from mic-mart March 2, 2026 23:05

mic-mart approved these changes Mar 2, 2026

View reviewed changes

cameronapak merged commit 325dff9 into main Mar 2, 2026
5 checks passed

cameronapak deleted the cp/YPE-1143-react-sdk-bible-card-formerly-bible-widget-view-fix-fouc branch March 2, 2026 23:45

Conversation

cameronapak commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Plz watch video demo first (1min)

Supporting SMOL video

Uh oh!

changeset-bot bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

chatgpt-codex-connector bot commented Feb 27, 2026

Uh oh!

cameronapak commented Feb 27, 2026

Uh oh!

greptile-apps bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cameronapak commented Feb 27, 2026

Uh oh!

cameronapak commented Mar 2, 2026

Uh oh!

mic-mart left a comment

Choose a reason for hiding this comment

Overall

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cameronapak commented Mar 2, 2026

Uh oh!

mic-mart left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cameronapak commented Feb 27, 2026 •

edited

Loading

changeset-bot bot commented Feb 27, 2026 •

edited

Loading

greptile-apps bot commented Feb 27, 2026 •

edited

Loading