Fixed flag loading

src/App.css

@@ -9,4 +9,8 @@
 
 .flagWrap {
   margin: 0 0 0 6px;
+}
+
+.loadingFlag {
+  display: none;
 }

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:{' '}