Prevent stale data race condition, update old TW classes, TW class consolidation

Author: alex-rawlings-yyc

src/__tests__/components/ContinuousView.test.tsx

@@ -429,7 +429,7 @@ describe('ContinuousView fade overlays', () => {
     // Prev fade gradient is tw:from-background (prev-to-next gradient)
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const prevFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-gradient-to-e'),
+      el.className.includes('tw:bg-linear-to-r'),
     );
     expect(prevFades).toHaveLength(0);
   });
@@ -439,7 +439,7 @@ describe('ContinuousView fade overlays', () => {
 
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const nextFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-gradient-to-s'),
+      el.className.includes('tw:bg-linear-to-l'),
     );
     expect(nextFades).toHaveLength(1);
   });
@@ -451,7 +451,7 @@ describe('ContinuousView fade overlays', () => {
 
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const prevFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-gradient-to-e'),
+      el.className.includes('tw:bg-linear-to-r'),
     );
     expect(prevFades).toHaveLength(1);
   });
@@ -466,7 +466,7 @@ describe('ContinuousView fade overlays', () => {
 
     const gradients = container.querySelectorAll('[aria-hidden="true"]');
     const nextFades = Array.from(gradients).filter((el) =>
-      el.className.includes('tw:bg-gradient-to-s'),
+      el.className.includes('tw:bg-linear-to-l'),
     );
     expect(nextFades).toHaveLength(0);
   });

src/__tests__/components/SelectInterlinearProjectModal.test.tsx

@@ -54,15 +54,18 @@ describe('SelectInterlinearProjectModal', () => {
 
   it('renders nothing while strings are loading', () => {
     jest.mocked(useLocalizedStrings).mockReturnValue([{}, true]);
+    mockSendCommand.mockReturnValue(new Promise(() => {}));
     const { container } = render(<SelectInterlinearProjectModal {...defaultProps} />);
     expect(container.firstChild).toBeNull();
   });
 
-  it('renders the modal heading when strings are loaded', () => {
+  it('renders the modal heading when strings are loaded', async () => {
     render(<SelectInterlinearProjectModal {...defaultProps} />);
-    expect(
-      screen.getByRole('heading', { name: /select interlinear project/i }),
-    ).toBeInTheDocument();
+    await waitFor(() =>
+      expect(
+        screen.getByRole('heading', { name: /select interlinear project/i }),
+      ).toBeInTheDocument(),
+    );
   });
 
   it('shows empty-state message when no projects are returned', async () => {
@@ -181,4 +184,82 @@ describe('SelectInterlinearProjectModal', () => {
     await waitFor(() => expect(screen.getByText('No projects yet.')).toBeInTheDocument());
     expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
   });
+
+  it('disables Cancel and Create New while the project list is loading', async () => {
+    let resolveLoad: (v: string) => void = () => {};
+    mockSendCommand.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveLoad = resolve;
+        }),
+    );
+    render(<SelectInterlinearProjectModal {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: /^cancel$/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /create new/i })).toBeDisabled();
+
+    resolveLoad('[]');
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /^cancel$/i })).not.toBeDisabled(),
+    );
+  });
+
+  it('re-enables Cancel and Create New after loading finishes', async () => {
+    mockSendCommand.mockResolvedValue('[]');
+    render(<SelectInterlinearProjectModal {...defaultProps} />);
+
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /^cancel$/i })).not.toBeDisabled(),
+    );
+    expect(screen.getByRole('button', { name: /create new/i })).not.toBeDisabled();
+  });
+
+  it('clears the project list immediately when a new load begins', async () => {
+    mockSendCommand.mockResolvedValue(JSON.stringify([STUB_PROJECT]));
+    const { rerender } = render(<SelectInterlinearProjectModal {...defaultProps} />);
+    await waitFor(() => expect(screen.getByText('Unnamed')).toBeInTheDocument());
+
+    // Hold the second load in-flight so we can assert the list cleared before it resolves.
+    let resolveSecond: (v: string) => void = () => {};
+    mockSendCommand.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveSecond = resolve;
+        }),
+    );
+
+    rerender(<SelectInterlinearProjectModal {...defaultProps} sourceProjectId="src-proj-2" />);
+
+    await waitFor(() => expect(screen.queryByText('Unnamed')).not.toBeInTheDocument());
+    expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+
+    resolveSecond('[]');
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /^cancel$/i })).not.toBeDisabled(),
+    );
+  });
+
+  it('ignores a response that arrives after a newer load has started', async () => {
+    let resolveFirst: (v: string) => void = () => {};
+    mockSendCommand
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveFirst = resolve;
+          }),
+      )
+      .mockResolvedValue(JSON.stringify([STUB_PROJECT_2]));
+
+    const { rerender } = render(<SelectInterlinearProjectModal {...defaultProps} />);
+
+    // Start a second load by changing sourceProjectId before the first resolves.
+    rerender(<SelectInterlinearProjectModal {...defaultProps} sourceProjectId="src-proj-2" />);
+    await waitFor(() => expect(screen.getByText('French glosses')).toBeInTheDocument());
+
+    // Now deliver the stale first response — it must not replace the current list.
+    resolveFirst(JSON.stringify([STUB_PROJECT]));
+
+    await waitFor(() => expect(screen.queryByText('Unnamed')).not.toBeInTheDocument());
+    expect(screen.getByText('French glosses')).toBeInTheDocument();
+  });
 });

src/components/ContinuousView.tsx

@@ -318,7 +318,7 @@ export default function ContinuousView({
       {/* Previous navigation arrow */}
       <button
         aria-label="Previous token"
-        className="tw:z-10 tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50"
+        className="tw:icon-button"
         disabled={atStart}
         onClick={stepPrev}
         type="button"
@@ -332,15 +332,15 @@ export default function ContinuousView({
         {!atStart && (
           <div
             aria-hidden="true"
-            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:inset-s-0 tw:z-10 tw:w-8 tw:bg-gradient-to-e tw:from-background tw:to-transparent"
+            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:left-0 tw:z-10 tw:w-8 tw:bg-linear-to-r tw:from-background tw:to-transparent"
           />
         )}
 
         {/* Next fade overlay — only rendered when the next arrow is enabled */}
         {!atEnd && (
           <div
             aria-hidden="true"
-            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:inset-e-0 tw:z-10 tw:w-8 tw:bg-gradient-to-s tw:from-background tw:to-transparent"
+            className="tw:pointer-events-none tw:absolute tw:inset-y-0 tw:right-0 tw:z-10 tw:w-8 tw:bg-linear-to-l tw:from-background tw:to-transparent"
           />
         )}
 
@@ -379,7 +379,7 @@ export default function ContinuousView({
       {/* Next navigation arrow */}
       <button
         aria-label="Next token"
-        className="tw:z-10 tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50"
+        className="tw:icon-button"
         disabled={atEnd}
         onClick={stepNext}
         type="button"

src/components/CreateProjectModal.tsx

@@ -122,10 +122,7 @@ export function CreateProjectModal({
         className="tw:modal-dialog tw:rounded tw:w-96"
         open
       >
-        <h2
-          id="create-project-modal-title"
-          className="tw:text-base tw:font-semibold tw:text-foreground tw:mb-4"
-        >
+        <h2 id="create-project-modal-title" className="tw:modal-title">
           {localizedStrings['%interlinearizer_modal_create_title%']}
         </h2>
         <label className="tw:block tw:text-sm tw:mb-1" htmlFor="project-name">

src/components/ProjectMetadataModal.tsx

@@ -180,20 +180,14 @@ export function ProjectMetadataModal({
         className="tw:modal-dialog tw:rounded-lg tw:w-lg"
         open
       >
-        <h2
-          id="project-metadata-modal-title"
-          className="tw:text-base tw:font-semibold tw:text-foreground tw:mb-4"
-        >
+        <h2 id="project-metadata-modal-title" className="tw:modal-title">
           {localizedStrings['%interlinearizer_modal_metadata_title%']}
         </h2>
 
         {/* Editable fields */}
         <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
           <div className="tw:flex tw:flex-col tw:gap-1">
-            <label
-              className="tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide"
-              htmlFor="metadata-edit-name"
-            >
+            <label className="tw:section-label" htmlFor="metadata-edit-name">
               {localizedStrings['%interlinearizer_modal_metadata_name_label%']}
             </label>
             <input
@@ -206,10 +200,7 @@ export function ProjectMetadataModal({
           </div>
 
           <div className="tw:flex tw:flex-col tw:gap-1">
-            <label
-              className="tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide"
-              htmlFor="metadata-edit-description"
-            >
+            <label className="tw:section-label" htmlFor="metadata-edit-description">
               {localizedStrings['%interlinearizer_modal_metadata_description_label%']}
             </label>
             <textarea
@@ -225,10 +216,7 @@ export function ProjectMetadataModal({
           </div>
 
           <div className="tw:flex tw:flex-col tw:gap-1">
-            <label
-              className="tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide"
-              htmlFor="metadata-edit-language"
-            >
+            <label className="tw:section-label" htmlFor="metadata-edit-language">
               {localizedStrings['%interlinearizer_modal_metadata_analysis_language_label%']}
             </label>
             <input
@@ -339,9 +327,7 @@ function MetadataRow({
 }: Readonly<{ label: string; value: string; mono?: boolean }>) {
   return (
     <div className="tw:flex tw:flex-col tw:gap-0.5">
-      <dt className="tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide">
-        {label}
-      </dt>
+      <dt className="tw:section-label">{label}</dt>
       <dd
         className={['tw:text-sm tw:break-all tw:text-foreground', mono ? 'tw:font-mono' : '']
           .filter(Boolean)

src/components/SegmentView.tsx

@@ -47,9 +47,7 @@ export function SegmentView({
       onClick={() => onClick?.({ book, chapter, verse })}
       type="button"
     >
-      <span className="tw:mb-2 tw:block tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide">
-        {verse}
-      </span>
+      <span className="tw:mb-2 tw:block tw:section-label">{verse}</span>
       {displayMode === 'baseline-text' ? (
         <span className="tw:font-mono tw:text-sm tw:text-foreground">{segment.baselineText}</span>
       ) : (

src/components/SelectInterlinearProjectModal.tsx

@@ -2,7 +2,7 @@ import papi, { logger } from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Info } from 'lucide-react';
 import { Button } from 'platform-bible-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { InterlinearProject } from 'interlinearizer';
 
 /** Localized string keys used by {@link SelectInterlinearProjectModal}. */
@@ -98,21 +98,28 @@ export function SelectInterlinearProjectModal({
 
   const [projects, setProjects] = useState<InterlinearProjectSummary[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  /** Incremented each time a load starts; lets an in-flight response detect it has been superseded. */
+  const loadGenRef = useRef(0);
 
   /**
    * Fetches interlinear projects for `sourceProjectId` and updates the `projects` state. Logs and
-   * shows a notification on failure.
+   * shows a notification on failure. Ignores the response if a newer load has started since this
+   * one was initiated.
    *
    * @returns A promise that resolves when the project list is loaded or the error notification is
    *   sent.
    */
   const loadProjects = useCallback(async () => {
+    loadGenRef.current += 1;
+    const gen = loadGenRef.current;
     setIsLoading(true);
+    setProjects([]);
     try {
       const json = await papi.commands.sendCommand(
         'interlinearizer.getProjectsForSource',
         sourceProjectId,
       );
+      if (gen !== loadGenRef.current) return;
       const parsed: unknown = JSON.parse(json);
       if (!Array.isArray(parsed)) {
         logger.warn('Interlinearizer: getProjectsForSource returned non-array', parsed);
@@ -131,7 +138,7 @@ export function SelectInterlinearProjectModal({
         .send({ message: '%interlinearizer_error_load_projects_failed%', severity: 'error' })
         .catch(() => {});
     } finally {
-      setIsLoading(false);
+      if (gen === loadGenRef.current) setIsLoading(false);
     }
   }, [sourceProjectId]);
 
@@ -148,10 +155,7 @@ export function SelectInterlinearProjectModal({
         className="tw:modal-dialog tw:rounded-lg tw:w-lg"
         open
       >
-        <h2
-          id="select-project-modal-title"
-          className="tw:text-base tw:font-semibold tw:text-foreground tw:mb-4"
-        >
+        <h2 id="select-project-modal-title" className="tw:modal-title">
           {localizedStrings['%interlinearizer_modal_select_title%']}
         </h2>
 

src/tailwind.css

@@ -39,6 +39,18 @@
   @apply tw:static tw:bg-background tw:text-foreground tw:border tw:border-border tw:p-6 tw:shadow-lg;
 }
 
+@utility modal-title {
+  @apply tw:text-base tw:font-semibold tw:text-foreground tw:mb-4;
+}
+
+@utility section-label {
+  @apply tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide;
+}
+
+@utility icon-button {
+  @apply tw:z-10 tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50;
+}
+
 /*
  * CUSTOM: Theme variable policy.
  *