Added loading displays

frontend/src/components/ConnectBlock.js

@@ -4,6 +4,7 @@ import Table from './Table';
 
 const ConnectBlock = () => {
   const [connectData, setConnectData] = useState('');
+  const [display, setDisplay] = useState('none');
 
   useEffect(() => {
     fetch('http://ip-api.com/json')
@@ -11,6 +12,7 @@ const ConnectBlock = () => {
       .then((data) => {
         setConnectData(data);
       });
+    setDisplay('block');
   }, []);
 
   const detectTor = () => {
@@ -57,7 +59,9 @@ const ConnectBlock = () => {
   return (
     <ScanBlock>
       <h1>Connection</h1>
-      <Table data={data} />
+      <div style={{ display }}>
+        <Table data={data} />
+      </div>
       <p>
         <b>Explanation:</b> JavaScript can be used to read various information
         about your software. This information can be used to create a

frontend/src/components/FingerprintBlock.js

@@ -7,12 +7,14 @@ import Table from './Table';
 const FingerprintBlock = () => {
   const [name, setName] = useState('');
   const [saved, setSaved] = useState('');
+  const [display, setDisplay] = useState('none');
 
   useEffect(() => {
     axios.get(`/api/fingerprint/?hash=${hash}`).then((response) => {
       if (response.data.length !== 0) {
         setName(response.data[response.data.length - 1].name);
       }
+      setDisplay('block');
     });
   }, []);
 
@@ -120,13 +122,15 @@ const FingerprintBlock = () => {
   return (
     <ScanBlock>
       <h1>Fingerprint</h1>
-      {name ? (
-        <Table data={tableData} />
-      ) : (
-        <div className="boxWrap">
-          <div className="hash">{hash}</div>
-        </div>
-      )}
+      <div style={{ display }}>
+        {name ? (
+          <Table data={tableData} />
+        ) : (
+          <div className="boxWrap">
+            <div className="hash">{hash}</div>
+          </div>
+        )}
+      </div>
       <p>
         <b>Explanation:</b> JavaScript can be used to read various information
         about your software. This information can be used to create a

frontend/src/components/LocationBlock.js

@@ -4,6 +4,7 @@ import Table from './Table';
 
 const LocationBlock = () => {
   const [locationData, setLocationData] = useState('');
+  const [display, setDisplay] = useState('none');
 
   useEffect(() => {
     fetch('http://ip-api.com/json')
@@ -11,6 +12,7 @@ const LocationBlock = () => {
       .then((data) => {
         setLocationData(data);
       });
+    setDisplay('block');
   }, []);
 
   const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${locationData.lat},${locationData.lon}&markers=color:red%7Clabel:%7C${locationData.lat},${locationData.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
@@ -52,12 +54,14 @@ const LocationBlock = () => {
     <ScanBlock>
       <h1>Location</h1>
       <img src={mapUrl} alt="Map of current location" />
-      <Table data={data} />
-      <p>
-        <b>Explanation:</b> JavaScript can be used to read various information
-        about your software. This information can be used to create a
-        fingerprint.
-      </p>
+      <div style={{ display }}>
+        <Table data={data} />
+        <p>
+          <b>Explanation:</b> JavaScript can be used to read various information
+          about your software. This information can be used to create a
+          fingerprint.
+        </p>
+      </div>
     </ScanBlock>
   );
 };

frontend/src/components/StartBlock.js

@@ -25,7 +25,7 @@ const StartBlock = ({ onScanClick }) => {
 
   const handleInputClick = async () => {
     document.getElementById('scanButton').value = 'Loading...';
-    await delay(2000);
+    await delay(100);
     startScan();
   };