[Issue #1937] Translate Loading component text

frontend/src/app/[locale]/search/loading.tsx

@@ -2,13 +2,19 @@ import React from "react";
 
 import Spinner from "src/components/Spinner";
 
-export default function Loading() {
-  // TODO (Issue #1937): Use translation utility for strings in this file
+export interface LoadingProps {
+  message?: string;
+}
+
+export default function Loading({ message }: LoadingProps) {
   return (
     <div className="display-flex flex-align-center flex-justify-center margin-bottom-15 margin-top-15">
       <Spinner />
-      <span className="font-body-2xl text-bold margin-left-2">
-        Loading results...
+      <span
+        className="font-body-2xl text-bold margin-left-2"
+        data-testid="loading-message"
+      >
+        {message || "Loading"}...
       </span>
     </div>
   );

frontend/src/app/[locale]/search/page.tsx

@@ -139,7 +139,10 @@ function Search({ searchParams }: { searchParams: searchParamsTypes }) {
                     scroll={false}
                   />
                 </Suspense>
-                <Suspense key={key} fallback={<Loading />}>
+                <Suspense
+                  key={key}
+                  fallback={<Loading message={t("loading")} />}
+                >
                   <SearchResultsListFetch
                     searchParams={convertedSearchParams}
                   />

frontend/src/i18n/messages/en/index.ts

@@ -497,5 +497,6 @@ export const messages = {
       select: "Select All",
       clear: "Clear All",
     },
+    loading: "Loading Results",
   },
 };

frontend/stories/pages/loading.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/react";
+
+import Loading from "../../src/app/[locale]/search/loading";
+
+const meta: Meta<typeof Loading> = {
+  component: Loading,
+};
+export default meta;
+
+export const Default = {
+  args: {
+    message: "Loading Storybook",
+  },
+};

frontend/tests/e2e/search/search-loading.spec.ts

@@ -27,7 +27,7 @@ test.describe("Search page tests", () => {
     const searchTerm = "advanced";
     await fillSearchInputAndSubmit(searchTerm, page);
 
-    const loadingIndicator = page.locator("text='Loading results...'");
+    const loadingIndicator = page.getByTestId("loading-message");
     await expect(loadingIndicator).toBeVisible();
     await expect(loadingIndicator).toBeHidden();