YPE-1564: replace Loading... text with spinner icon in version button (#196)

* fix: replace Loading... text with spinner icon in version button

Amp-Thread-ID: https://ampcode.com/threads/T-019d0681-30c6-7664-ac27-ea412cabfbce
Co-authored-by: Amp <amp@ampcode.com>

* Added changeset

* Add wrapper div to bible reader version button

This change adds a wrapper div around the version abbreviation within
the Bible reader's toolbar button. This is done to minimize layout
shifts when the version is loading or selected, ensuring a more stable
user experience.

* Added tests

* Added aria label to the loading button

* test: use MSW delay for deterministic loading-state assertions in BibleReader stories

Amp-Thread-ID: https://ampcode.com/threads/T-019d0711-2000-740f-95fe-860fdfd2d8fd
Co-authored-by: Amp <amp@ampcode.com>

---------

Co-authored-by: Amp <amp@ampcode.com>

Author: cameronapak

.changeset/tricky-keys-train.md

@@ -0,0 +1,7 @@
+---
+'@youversion/platform-react-hooks': patch
+'@youversion/platform-core': patch
+'@youversion/platform-react-ui': patch
+---
+
+fix: use spinner icon instead of "Loading..." text in Bible version button

packages/ui/src/components/bible-reader.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn, screen, spyOn, userEvent, waitFor } from 'storybook/test';
+import { http, HttpResponse, delay } from 'msw';
 import { BibleReader } from './bible-reader';
 import { setupAuthenticatedUser } from '../test/utils';
 import { INTER_FONT, SOURCE_SERIF_FONT } from '@/lib/verse-html-utils';
+import mockBibles from '../test/mock-data/bibles.json';
 
 let signInMock: ReturnType<typeof fn>;
 
@@ -630,7 +632,7 @@ export const WithoutAuth: Story = {
     const chapterButton = screen.getByRole('button', { name: /change bible book and chapter/i });
     await expect(chapterButton).toBeInTheDocument();
 
-    const versionButton = screen.getByRole('button', { name: /change bible version/i });
+    const versionButton = await screen.findByRole('button', { name: /bible version/i });
     await expect(versionButton).toBeInTheDocument();
 
     // Settings should still work
@@ -639,6 +641,68 @@ export const WithoutAuth: Story = {
   },
 };
 
+/**
+ * Tests that the Bible version button in the toolbar shows a loading spinner
+ * initially and then transitions to showing the version abbreviation once loaded.
+ */
+export const VersionButtonLoadingStates: Story = {
+  tags: ['integration'],
+  args: {
+    defaultVersionId: 111,
+    book: 'JHN',
+    chapter: '1',
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        // Delay the version endpoint so the loading state is reliably observable
+        http.get('*/v1/bibles/:id', async ({ params }) => {
+          await delay(1000);
+          const id = params.id as string;
+          const bible =
+            mockBibles.individual[id as keyof typeof mockBibles.individual] ??
+            mockBibles.collections.default.data.find((b) => b.id === Number(id));
+          if (bible) return HttpResponse.json(bible);
+          return new HttpResponse(null, { status: 404 });
+        }),
+      ],
+    },
+  },
+  render: (args) => (
+    <div className="yv:h-screen yv:bg-background">
+      <BibleReader.Root {...args}>
+        <BibleReader.Content />
+        <BibleReader.Toolbar />
+      </BibleReader.Root>
+    </div>
+  ),
+  play: async () => {
+    // The version button should exist in the toolbar (label varies by loading state)
+    const versionButton = screen.getByRole('button', { name: /bible version/i });
+    await expect(versionButton).toBeInTheDocument();
+
+    // The delayed MSW handler guarantees the loading state is visible
+    const spinner = versionButton.querySelector('[role="status"]');
+    await expect(spinner).toBeInTheDocument();
+    await expect(versionButton).toBeDisabled();
+    await expect(versionButton).toHaveAttribute('aria-label', 'Loading Bible version');
+
+    // After loading completes, the button should show the version abbreviation (e.g. "NIV")
+    await waitFor(
+      async () => {
+        await expect(versionButton).not.toBeDisabled();
+        // Spinner should be gone
+        await expect(versionButton.querySelector('[role="status"]')).not.toBeInTheDocument();
+        // aria-label should switch to "Change" once loaded
+        await expect(versionButton).toHaveAttribute('aria-label', 'Change Bible version');
+        // Should display the abbreviation text
+        await expect(versionButton.textContent).toMatch(/[A-Z]{2,}/);
+      },
+      { timeout: 5000 },
+    );
+  },
+};
+
 /**
  * Tests that a rich intro chapter (Joshua) renders correctly with real-world content
  * including structured sections (At a Glance, Purpose, Major Themes), italic spans,

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

@@ -434,8 +434,16 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                 variant="secondary"
                 className="yv:font-bold yv:text-foreground"
                 disabled={loading}
+                aria-label={loading ? 'Loading Bible version' : 'Change Bible version'}
               >
-                {loading ? 'Loading...' : version?.localized_abbreviation || 'Select version'}
+                {/* This div exists merely as a wrapper to minimize width layout shifting */}
+                <div className="yv:min-w-[3ch] yv:flex yv:justify-center">
+                  {loading ? (
+                    <LoaderIcon className="yv:size-4 yv:animate-spin yv:text-muted-foreground" />
+                  ) : (
+                    version?.localized_abbreviation || 'Select version'
+                  )}
+                </div>
               </Button>
             )}
           </BibleVersionPicker.Trigger>