lazy load Flag

client/src/components/Settings/Settings.jsx

@@ -16,7 +16,10 @@ import { ArrowForwardIos } from "@material-ui/icons";
 import { useTracking } from "react-tracking";
 import SupportButton from "../Buttons/SupportButton";
 import importedCountryList from 'react-select-country-list';
-import Flag from 'react-world-flags';
+import { lazy } from "@types/react";
+
+// Flag is a huge component (10MB unzipped, 1,24 after bundling and packing) so it must be lazy-loaded
+const Flag = lazy(() => import('react-world-flags'));
 
 const useStyles = makeStyles(theme => ({
   settings: {
@@ -179,7 +182,7 @@ const Settings = () => {
             <TableRow>
               <TableCell className={classes.tableCell}><Typography className={classes.label} id="country-select-label">{t('Country')}</Typography></TableCell>
               <TableCell className={classes.tableCell}>
-                <Select labelId="country-select-label" id="country-select" value={country} onChange={event => {changeCountry(event.target.value);}}>
+                <Select input={<InputBase />} labelId="country-select-label" id="country-select" value={country} onChange={event => {changeCountry(event.target.value);}}>
                   {getCountryMenuItems()}
                 </Select>
               </TableCell>

client/src/components/Social/UserList.jsx

@@ -12,7 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "react-router-dom";
 import { useTracking } from "react-tracking";
 
-// Flags is a huge component (10MB unzipped, 1,24 after bundling and packing) so it must be lazy-loaded
+// Flag is a huge component (10MB unzipped, 1,24 after bundling and packing) so it must be lazy-loaded
 const Flag = lazy(() => import('react-world-flags'));
 
 const useStyles = makeStyles(theme => ({