Add translation support to the search loading component. Adds potenti…

…al for non-search loading translation as well

Fixes #1937

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

@@ -1,14 +1,16 @@
+import { useTranslations } from "next-intl";
 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
+  const t = useTranslations("Loading");
+
   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...
+        {t("search")}...
       </span>
     </div>
   );

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

@@ -498,4 +498,8 @@ export const messages = {
       clear: "Clear All",
     },
   },
+  Loading: {
+    default: "Loading",
+    search: "Loading Results",
+  },
 };

frontend/stories/pages/loading.stories.tsx

@@ -0,0 +1,10 @@
+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 = {};