Dynamically fetch language bundles at runtime.

components/layout/Footer.js

@@ -9,7 +9,7 @@ import { rtlLocales } from 'lib/lang';
 
 export default function Footer() {
   const { current } = useVersion();
-  const [locale] = useLocale();
+  const { locale } = useLocale();
 
   return (
     <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>

components/layout/Header.js

@@ -19,7 +19,7 @@ import Bars from 'assets/bars.svg';
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
-  const [locale] = useLocale();
+  const { locale } = useLocale();
 
   function handleClick() {
     setActive(state => !state);

components/layout/Layout.js

@@ -6,7 +6,7 @@ import useLocale from 'hooks/useLocale';
 import { rtlLocales } from 'lib/lang';
 
 export default function Layout({ title, children, header = true, footer = true }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const dir = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
 
   return (