Detects if there is a name before showing hash

frontend/src/components/FingerprintBlock.js

@@ -13,18 +13,23 @@ import {
 
 const FingerprintBlock = () => {
   const [name, setName] = useState('');
+  const [load, setLoad] = useState(false);
   const [saved, setSaved] = useState('');
   const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
-  getName(hash, setName);
+  getName(hash, setName, setLoad);
   return (
     <ScanBlock>
       <h1>Fingerprint</h1>
-      {name ? (
+      {load && (
-        <Table data={getFingerprint(name, hash)} />
+        <>
-      ) : (
+          {name ? (
-        <div className="boxWrap">
+            <Table data={getFingerprint(name, hash)} />
-          <div className="hash">{hash}</div>
+          ) : (
-        </div>
+            <div className="boxWrap">
+              <div className="hash">{hash}</div>
+            </div>
+          )}
+        </>
       )}
       <p>
         <b>Explanation:</b> This is a unique identifier that can be used to

frontend/src/components/main.js

@@ -322,13 +322,14 @@ const getFingerprint = (name, hash) => {
 
 const getHash = (data) => md5(JSON.stringify(data)).toString();
 
-const getName = (hash, setName) => {
+const getName = (hash, setName, setLoad) => {
   axios
     .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
     .then((response) => {
       if (response.data.length !== 0) {
         setName(response.data[response.data.length - 1].name);
       }
+      setLoad(true);
     });
 };