#428

frontend/src/components/RouteBlockerOverlay.tsx

@@ -1,6 +1,10 @@
 import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { create } from 'zustand'
 
+import LocalisedText from '@/components/LocalisedText'
+import { translateUIMessage } from '@/lib/i18n'
+
 import type { FC } from 'react'
 
 type OverlayStore = {
@@ -14,6 +18,9 @@ export const useOverlayStore = create<OverlayStore> (set => ({
 
 
 const RouteBlockerOverlay: FC = () => {
+  const { i18n } = useTranslation ('common')
+  const loading = translateUIMessage ('loading', 'common', i18n.language)
+  const loadingLabel = translateUIMessage ('loadingLabel', 'common', i18n.language)
   const active = useOverlayStore (s => s.active)
 
   useEffect (() => {
@@ -35,14 +42,15 @@ const RouteBlockerOverlay: FC = () => {
   return (
       <div
 	  role="progressbar"
-	  aria-label="Loading"
+	  aria-label={loadingLabel.text}
+	  lang={loadingLabel.language}
 	  className="fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm pointer-events-auto">
 	<div className="absolute inset-0 flex items-center justify-center">
 	  <div className="rounded-2xl bg-black/60 text-white px-6 py-3 text-sm">
-	    Loading...
+	    <LocalisedText language={loading.language}>{loading.text}</LocalisedText>
 	  </div>
 	</div>
       </div>)
 }
 
-export default RouteBlockerOverlay
+export default RouteBlockerOverlay