Ensure page direction is set properly on first load (#209)

Fixes #201

1 files changed, 8 insertions, 1 deletions

diff --git a/src/App.js b/src/App.js
index cf0ebd2..2601080 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import logo from '../src/images/wifi.png';
 import { Settings } from './components/Settings';
@@ -97,6 +97,13 @@ function App() {
     firstLoad.current = false;
   };
 
+  useEffect(() => {
+    // Ensure the page direction is set properly on first load
+    if (htmlDirection() === 'rtl') {
+      html.style.direction = 'rtl';
+    }
+  });
+
   return (
     <Pane>
       <Pane display="flex">