From 0498a9e7f9645456aeed3863f6dfb46dcce1c762 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 21 Feb 2025 19:07:57 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20preload=20notification?=
 =?UTF-8?q?s=20translations=20to=20prevent=20flickering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The notifications namespace was being lazy-loaded when the first notification
appeared, causing a screen flicker during translation loading. Now preloading
the namespace during i18n initialization to ensure smooth rendering.
---
 .../src/features/notifications/MainNotificationToast.tsx     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx
index e1d87f37..0cbeb71f 100644
--- a/src/frontend/src/features/notifications/MainNotificationToast.tsx
+++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx
@@ -12,6 +12,7 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { useTranslation } from 'react-i18next'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
@@ -186,6 +187,10 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
+  // Without this line, when the component first renders,
+  // the 'notifications' namespace might not be loaded yet
+  useTranslation(['notifications'])
+
   return (
     <Div position="absolute" bottom={0} right={5} zIndex={1000}>
       <ToastProvider />