feat(localization): improve translation handling and update UI labels

- Updated the 'board' label in project-view translations for consistency.
- Enhanced the getTabLabel function to include fallback labels for better user experience when translations are not available.
- Implemented translation loading checks in ProjectView to ensure labels are updated correctly based on the selected language.
- Refactored tab label updates to handle translation loading errors gracefully.

worklenz-frontend/src/pages/projects/projectView/project-view.tsx

@@ -7,8 +7,6 @@ import {
   Button,
   ConfigProvider,
   Flex,
-  Tooltip,
-  Badge,
   Tabs,
   PushpinFilled,
   PushpinOutlined,
@@ -20,7 +18,6 @@ import { useAppSelector } from '@/hooks/useAppSelector';
 import { getProject, setProjectId, setProjectView } from '@/features/project/project.slice';
 import { fetchStatuses, resetStatuses } from '@/features/taskAttributes/taskStatusSlice';
 import { projectsApiService } from '@/api/projects/projects.api.service';
-import { colors } from '@/styles/colors';
 import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import ProjectViewHeader from './project-view-header';
 import './project-view.css';
@@ -42,6 +39,7 @@ import { resetState as resetEnhancedKanbanState } from '@/features/enhanced-kanb
 import { setProjectId as setInsightsProjectId } from '@/features/projects/insights/project-insights.slice';
 import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 import { useTranslation } from 'react-i18next';
+import { ensureTranslationsLoaded } from '@/i18n';
 
 // Import critical components synchronously to avoid suspense interruptions
 import TaskDrawer from '@components/task-drawer/task-drawer';
@@ -64,12 +62,15 @@ const ProjectView = React.memo(() => {
   const dispatch = useAppDispatch();
   const [searchParams] = useSearchParams();
   const { projectId } = useParams();
-  const { t } = useTranslation('project-view');
+  const { t, i18n } = useTranslation('project-view');
 
   // Memoized selectors to prevent unnecessary re-renders
   const selectedProject = useAppSelector(state => state.projectReducer.project);
   const projectLoading = useAppSelector(state => state.projectReducer.projectLoading);
 
+  // State to track translation loading
+  const [translationsReady, setTranslationsReady] = useState(false);
+
   // Optimize document title updates
   useDocumentTitle(selectedProject?.name || t('projectView'));
 
@@ -95,6 +96,30 @@ const ProjectView = React.memo(() => {
     setTaskId(urlParams.taskId);
   }, [urlParams]);
 
+  // Ensure translations are loaded for project-view namespace
+  useEffect(() => {
+    const loadTranslations = async () => {
+      try {
+        await ensureTranslationsLoaded(['project-view'], [i18n.language]);
+        updateTabLabels();
+        setTranslationsReady(true);
+      } catch (error) {
+        console.error('Failed to load project-view translations:', error);
+        // Set ready to true anyway to prevent infinite loading
+        setTranslationsReady(true);
+      }
+    };
+
+    loadTranslations();
+  }, [i18n.language]);
+
+  // Update tab labels when language changes
+  useEffect(() => {
+    if (translationsReady) {
+      updateTabLabels();
+    }
+  }, [t, translationsReady]);
+
   // Comprehensive cleanup function for when leaving project view entirely
   const resetAllProjectData = useCallback(() => {
     dispatch(setProjectId(null));
@@ -176,11 +201,6 @@ const ProjectView = React.memo(() => {
     setIsInitialized(false);
   }, [projectId]);
 
-  // Update tab labels when language changes
-  useEffect(() => {
-    updateTabLabels();
-  }, [t]);
-
   // Effect for handling task drawer opening from URL params
   useEffect(() => {
     if (taskid && isInitialized) {
@@ -250,6 +270,11 @@ const ProjectView = React.memo(() => {
 
   // Memoized tab menu items with enhanced styling
   const tabMenuItems = useMemo(() => {
+    // Only render tabs when translations are ready
+    if (!translationsReady) {
+      return [];
+    }
+
     const menuItems = tabItems.map(item => ({
       key: item.key,
       label: (
@@ -304,7 +329,7 @@ const ProjectView = React.memo(() => {
     }));
 
     return menuItems;
-  }, [pinnedTab, pinToDefaultTab, t]);
+  }, [pinnedTab, pinToDefaultTab, t, translationsReady]);
 
   // Optimized secondary components loading with better UX
   const [shouldLoadSecondaryComponents, setShouldLoadSecondaryComponents] = useState(false);
@@ -341,8 +366,8 @@ const ProjectView = React.memo(() => {
     [shouldLoadSecondaryComponents]
   );
 
-  // Show loading state while project is being fetched
-  if (projectLoading || !isInitialized) {
+  // Show loading state while project is being fetched or translations are loading
+  if (projectLoading || !isInitialized || !translationsReady) {
     return (
       <div style={{ marginBlockStart: 70, marginBlockEnd: 12, minHeight: '80vh' }}>
         <SuspenseFallback />