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>
+      <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,6 +122,7 @@ const FingerprintBlock = () => {
   return (
     <ScanBlock>
       <h1>Fingerprint</h1>
+      <div style={{ display }}>
         {name ? (
           <Table data={tableData} />
         ) : (
@@ -127,6 +130,7 @@ const FingerprintBlock = () => {
             <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" />
+      <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();
   };