YPE-1204: Add loading state when network requests are in flight

[jaredhightower-youversion]

Summary

• Adds a dedicated loading skeleton UI for BibleCard and uses it during passage/version fetches.
• Adds Storybook interaction coverage to verify loading skeleton behavior across loading variants.

What Changed

• Introduced reusable Skeleton primitive: packages/ui/src/components/ui/skeleton.tsx
• Added BibleCardSkeleton component for the card loading state: packages/ui/src/components/bible-card-skeleton.tsx
• Updated BibleCard to render skeleton while loading: packages/ui/src/components/bible-card.tsx
• Updated verse rendering/loading behavior as part of card loading flow: packages/ui/src/components/verse.tsx
• Added Storybook play integration tests for loading stories (Loading, LoadingWithVersionPicker, LoadingDarkMode): packages/ui/src/components/bible-card.stories.tsx

Screen.Recording.2026-02-25.at.2.43.12.PM.mov

[chatgpt-codex-connector]

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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4afce33

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	Minor
@youversion/platform-core	Minor
@youversion/platform-react-hooks	Minor
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

[greptile-apps]

Greptile Summary

Implemented a comprehensive loading state solution for BibleCard component with proper skeleton UI and accessibility. The changes introduce reusable Skeleton and BibleCardSkeleton components that display during network requests, with corresponding Storybook interaction tests to verify behavior.

Key improvements:

• Prevented duplicate API fetches by passing passage/error state from BibleCard to BibleTextView
• Added proper accessibility attributes (role="status", aria-live="polite", aria-busy="true") to loading skeleton
• Maintained backward compatibility in BibleTextView by making external state optional
• Added comprehensive Storybook coverage for loading states with MSW delayed handlers

Code quality:

• Loading delay constant properly extracted in stories
• Clean separation of concerns between skeleton primitives and composed components
• Proper use of conditional fetching via options.enabled flag

Confidence Score: 5/5

• This PR is safe to merge with no blocking issues
• The implementation follows React best practices, includes proper accessibility attributes, prevents duplicate API calls through smart state management, and adds comprehensive Storybook interaction tests. The code is well-structured with good separation of concerns between primitive and composed components.
• No files require special attention

Important Files Changed

Filename	Overview
packages/ui/src/components/ui/skeleton.tsx	Adds reusable Skeleton primitive component with proper accessibility attributes (aria-hidden="true")
packages/ui/src/components/bible-card-skeleton.tsx	Adds BibleCardSkeleton component with proper accessibility (role="status", aria-live="polite", aria-busy="true") and theme support
packages/ui/src/components/bible-card.tsx	Updates BibleCard to capture loading states from hooks and render skeleton, passes passage/error props to BibleTextView to prevent duplicate fetches
packages/ui/src/components/verse.tsx	Updates BibleTextView to accept optional passage/loading/error props, conditionally disables internal fetch when external state provided, exports VerseUnavailableMessage
packages/ui/src/components/bible-card.stories.tsx	Adds MSW delayed handlers and three new loading state stories (Loading, LoadingWithVersionPicker, LoadingDarkMode) with interaction tests verifying skeleton behavior

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[BibleCard Component] --> B{Is Loading?}
    B -->|Yes| C[Render BibleCardSkeleton]
    B -->|No| D[Render Full BibleCard]
    
    C --> E[Skeleton Component]
    E --> F[Accessible Loading State<br/>role=status aria-busy=true]
    
    D --> G[BibleTextView]
    D --> H[Pass passage and error props]
    
    H --> I[BibleTextView receives external state]
    I --> J{Has External State?}
    J -->|Yes| K[Use passed props<br/>Disable internal fetch]
    J -->|No| L[Use internal usePassage hook]
    
    K --> M[Render verse content]
    L --> M
    
    style C fill:#e1f5ff
    style F fill:#d4edda
    style K fill:#fff3cd

Loading

_{Last reviewed commit: f7930e6}

[greptile-apps]

_{5 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[cameronapak]

Hey @jaredhightower-youversion, thanks for the work on this PR. I unfortunately can't merge this as-is.

As I mentioned in #165 (comment), the goal here is to solve layout shifting. The skeleton component looks nice, but it doesn't actually solve the layout shift problem because the BibleCard height and width still shift.

I have a ticket to solve this properly: https://lifechurch.atlassian.net/browse/YPE-1143

I appreciate you and your effort

[cameronapak]

#174 (comment)