chore: remove react-world-flags dependency and update flag rendering

- Removed react-world-flags from package.json and package-lock.json
- Updated flag rendering in AccountPane to use image tags with flagcdn for better performance and reliability

client/package-lock.json

@@ -75,7 +75,6 @@
         "react-router-dom": "^6.30.1",
         "react-textarea-autosize": "^8.5.9",
         "react-time-ago": "^7.3.3",
-        "react-world-flags": "^1.6.0",
         "redux": "^4.2.1",
         "redux-logger": "^3.0.6",
         "redux-orm": "^0.16.2",
@@ -12540,20 +12539,6 @@
         "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/react-world-flags": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.6.0.tgz",
-      "integrity": "sha512-eutSeAy5YKoVh14js/JUCSlA6EBk1n4k+bDaV+NkNB50VhnG+f4QDTpYycnTUTsZ5cqw/saPmk0Z4Fa0VVZ1Iw==",
-      "license": "MIT",
-      "dependencies": {
-        "svg-country-flags": "^1.2.10",
-        "svgo": "^3.0.2",
-        "world-countries": "^5.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14"
-      }
-    },
     "node_modules/read-package-up": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/read-package-up/-/read-package-up-11.0.0.tgz",

client/package.json

@@ -146,7 +146,6 @@
     "react-router-dom": "^6.30.1",
     "react-textarea-autosize": "^8.5.9",
     "react-time-ago": "^7.3.3",
-    "react-world-flags": "^1.6.0",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",

client/src/components/users/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -7,7 +7,6 @@ import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
-import Flag from 'react-world-flags';
 
 import { usePopupInClosableContext } from '../../../../hooks';
 import locales from '../../../../locales';
@@ -76,10 +75,11 @@ const AccountPane = React.memo(() => {
               <>
                 {locale.country && (
                   <span className={localeFlagStyles.localeFlagWrapper}>
-                    <Flag
+                    <img
-                      code={locale.country.toUpperCase()}
+                      src={`https://flagcdn.com/48x36/${locale.country.toLowerCase()}.png`}
+                      alt={locale.country}
                       className={localeFlagStyles.localeFlag}
-                      fallback={<span className={localeFlagStyles.localeFlag} />}
+                      loading="lazy"
                     />
                   </span>
                 )}