YPE-1141: Add loading spinner to BibleVersionPicker

[Kyleasmth]

Summary

• Show a loading spinner in the version list and language badge while versions are fetching, instead of flashing "No versions found"
• Add unit tests covering loading, empty, and loaded states
• Add a Storybook Loading story for visual QA

Test plan

• Verify spinner displays in version list area while loading
• Verify spinner displays in the language button badge while loading
• Verify "No versions found" only appears after loading completes with no results
  Run pnpm --filter @youversion/platform-react-ui test

[changeset-bot]

⚠️ No Changeset found

Latest commit: f3e4fbe

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[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.

[greptile-apps]

Greptile Summary

Added a loading spinner to the BibleVersionPicker component to improve user experience during version fetching. The implementation properly tracks the loading state from the useVersions hook and conditionally renders a LoaderIcon in two locations:

• Language badge: Displays a spinning icon instead of the version count while loading
• Empty version list area: Shows a spinner instead of the "No versions found" message while loading

The changes include:

• Imported LoaderIcon component
• Added versionsLoading to context type and provider
• Conditionally rendered spinner in badge (line 427-431) and empty state (line 535-539)
• Comprehensive unit tests covering loading, empty, and loaded states
• New Storybook Loading story for visual verification using MSW to delay API responses

All tests properly mock the useVersions hook to simulate loading states and verify correct UI rendering.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is straightforward and well-tested. It adds a simple loading state UI enhancement without modifying core logic. The changes are isolated to the BibleVersionPicker component and include comprehensive unit tests and Storybook stories. The loading state is properly sourced from the existing useVersions hook, and the conditional rendering logic is clear and correct.
• No files require special attention

Important Files Changed

Filename	Overview
packages/ui/src/components/bible-version-picker.tsx	Added loading state tracking from useVersions hook and conditionally displays spinner in badge and empty state area
packages/ui/src/components/bible-version-picker.test.tsx	Comprehensive test coverage for loading, empty, and loaded states with proper mocking and assertions
packages/ui/src/components/bible-version-picker.stories.tsx	Added Loading story with MSW handlers that delay API responses indefinitely for visual QA

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User Opens BibleVersionPicker] --> B{versionsLoading?}
    B -->|true| C[Show LoaderIcon in Badge]
    B -->|false| D[Show Version Count in Badge]
    
    B -->|true| E{filteredVersions.length == 0?}
    E -->|true| F[Show LoaderIcon in Version List Area]
    E -->|false| G[Show Version Items]
    
    B -->|false| H{filteredVersions.length == 0?}
    H -->|true| I[Show 'No versions found' Message]
    H -->|false| G
    
    J[useVersions Hook] --> K[Returns loading state]
    K --> L[versionsLoading passed to Context]
    L --> M[Components render based on versionsLoading]

Loading

_{Last reviewed commit: 69cbbde}

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[cameronapak]

Works like a charm. Approved. Please see if you need to make any changes based on Jared's PR comment