Dynamically fetch language bundles at runtime.

components/metrics/BarChart.js

@@ -27,7 +27,7 @@ export default function BarChart({
   const canvas = useRef();
   const chart = useRef();
   const [tooltip, setTooltip] = useState(null);
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const [theme] = useTheme();
   const forceUpdate = useForceUpdate();
 

components/metrics/CountriesTable.js

@@ -6,7 +6,7 @@ import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 
 export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
   function renderLabel({ x }) {

components/metrics/Legend.js

@@ -6,7 +6,7 @@ import styles from './Legend.module.css';
 import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function Legend({ chart }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
   function handleClick(index) {

components/metrics/RealtimeLog.js

@@ -31,7 +31,7 @@ const TYPE_ICONS = {
 
 export default function RealtimeLog({ data, websites, websiteId }) {
   const intl = useIntl();
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);