Skip to content

feat: complete internationalization and fix language dropdown sync#221

Open
Madhavi1108 wants to merge 2 commits into
thetechguardians:mainfrom
Madhavi1108:fix-language-dropdown-sync
Open

feat: complete internationalization and fix language dropdown sync#221
Madhavi1108 wants to merge 2 commits into
thetechguardians:mainfrom
Madhavi1108:fix-language-dropdown-sync

Conversation

@Madhavi1108

Copy link
Copy Markdown

Description

This PR enhances the platform's internationalization (i18n) support by improving language synchronization between the application state and the user interface.

The update ensures that the language selector always reflects the currently active language, whether it is loaded automatically on page initialization or changed programmatically during runtime. This eliminates inconsistencies between the displayed language and the selected value in the dropdown while strengthening the overall multilingual user experience.

Closes #183

Type of Change

  • Enhancement
  • Bug fix
  • Documentation update
  • Refactoring

Checklist

  • Code follows project style
  • Tested locally
  • Updated documentation

Changes Made

Language Selector Synchronization

Updated the localization initialization flow so that the language dropdown automatically synchronizes with the currently active application language.

The selected option now correctly reflects:

  • Auto-detected language on page load

  • Previously saved user preference

  • Programmatically changed language values

  • Active translation state after initialization


Initialization Flow Improvements

Enhanced the i18next initialization promise to update the language selector immediately after translations are loaded.

This ensures:

  • UI state remains consistent with localization state

  • No manual user interaction is required

  • Correct language is displayed immediately after initialization


DOM Loading Race Condition Handling

Added safeguards to handle situations where localization initializes before the DOM is fully available.

The implementation now:

  • Detects whether the document has completed loading

  • Uses a DOMContentLoaded listener when necessary

  • Synchronizes the language selector once the dropdown becomes available

This prevents race conditions between page rendering and translation initialization.


Programmatic Language Change Support

Updated the changeLanguage function so that it also synchronizes the language dropdown whenever the language is modified through code.

This guarantees consistent behavior regardless of whether the language change originates from:

  • User interaction

  • Internal application logic

  • Future automated workflows


Persistent User Experience

The language selector now remains aligned with the active localization state across:

  • Page refreshes

  • Navigation between pages

  • Reloading the application

  • Runtime language switching


Files Updated

Frontend

  • Frontend/i18n.js

User Experience Improvements

Language Selection

Users now experience:

  • Automatic language selection on page load

  • Correct dropdown state after refresh

  • Consistent UI when switching languages

  • No mismatch between displayed language and selected option

Internationalization

Improves the overall multilingual experience by ensuring:

  • UI controls accurately represent application state

  • Language persistence behaves predictably

  • Localization feels seamless across navigation events


How Has This Been Tested?

Initial Load Validation

Verified:

  • The language dropdown reflects the currently loaded language immediately after initialization

  • Previously stored language preferences are displayed correctly

Refresh Testing

Verified:

  • Refreshing the page preserves the selected language

  • Dropdown value remains synchronized after reload

Programmatic Updates

Verified:

  • Calling changeLanguage() updates translations

  • The dropdown selection updates automatically

  • No manual synchronization is required

Race Condition Testing

Verified:

  • Initialization succeeds when the DOM loads before i18n

  • Initialization succeeds when i18n loads before the DOM

  • DOMContentLoaded fallback correctly synchronizes the selector

Navigation Validation

Verified:

  • Language selection remains consistent when switching pages

  • Dropdown always matches the active localization state


Acceptance Criteria

  • Language dropdown automatically reflects the active language

  • Previously selected language persists across page reloads

  • Programmatic language changes synchronize with the UI

  • Race conditions between DOM loading and localization initialization are handled gracefully

  • Language selector remains consistent during navigation

  • No manual refresh or reselection is required after language changes

Technical Notes

  • The synchronization logic has been integrated directly into the i18next initialization flow to ensure the language selector always mirrors the current localization state.

  • A DOMContentLoaded fallback prevents timing issues when translations initialize before the language selector exists in the DOM.

  • The changeLanguage implementation now explicitly updates the dropdown value, making the architecture resilient to future programmatic language changes and supporting continued expansion of the platform's multilingual capabilities.

  • These improvements complement the broader internationalization architecture by ensuring that language preferences remain consistent and intuitive as additional languages and localization features are introduced.

@Madhavi1108

Copy link
Copy Markdown
Author

Hi @Vikrant0207,
I apologize for the issues in my previous pr
Please find below the working video of the same

Screen.Recording.2026-06-17.115803.mp4

@Vikrant0207

Copy link
Copy Markdown
Collaborator
image

there are errors

@Madhavi1108

Copy link
Copy Markdown
Author

Hi @Vikrant0207,
image
image
The pr i raised in my system is showing all the sections are working properly.
Kindly let me know if I need to force push my code agaim for verification

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FEATURE: Multi-language Support (i18n) for Weather Insights, Risk Analysis, and Chatbot Responses

2 participants