From e94a09586436e0234cf0e94250fe4b606403f7ec Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 7 Jun 2021 11:55:49 -0400
Subject: [PATCH] Fixed flag loading

---
 src/App.css |  4 ++++
 src/App.jsx | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 05cadfb..8baec69 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,4 +9,8 @@
 
 .flagWrap {
   margin: 0 0 0 6px;
+}
+
+.loadingFlag {
+  display: none;
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 8e6661d..15121c4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,19 +9,24 @@ const updateDOM = (id, text) => {
 
 const App = () => {
   const [country, setCountry] = useState('US');
+  const [flag, setFlag] = useState(false);
 
   useEffect(() => {
     fetch('http://ip-api.com/json')
       .then((response) => response.json())
       .then((data) => {
         setCountry(data.countryCode);
+        setFlag(true);
         updateDOM('ipAddress', data.query);
         updateDOM('country', data.country);
         updateDOM('region', data.regionName);
         updateDOM('city', data.city);
+        updateDOM('zip', data.zip);
         updateDOM('provider', data.isp);
       });
 
+    updateDOM('os', navigator.oscpu);
+
     updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`);
 
     navigator.getBattery().then((battery) => {
@@ -44,7 +49,7 @@ const App = () => {
           Country:{' '}
         </div>
         <div className="flagWrap">
-          <Flag code={country} size="S" />
+          {flag === true && <Flag code={country} size="S" />}
         </div>
       </div>
       <div className="item" id="region">
@@ -53,9 +58,16 @@ const App = () => {
       <div className="item" id="city">
         City:{' '}
       </div>
+      <div className="item" id="zip">
+        Zip:{' '}
+      </div>
       <div className="item" id="provider">
         Provider:{' '}
       </div>
+      <div className="title">Software</div>
+      <div className="item" id="browser">
+        Browser:{' '}
+      </div>
       <div className="title">Hardware</div>
       <div className="item" id="screenSize">
         Screen resolution:{' '}