From e93776f824b0c66a4ea713af5b2b4d4e6469b683 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 10 Jan 2023 12:27:48 +0100
Subject: [PATCH] spinner for nip05 verification

---
 src/element/Nip05.css |  6 +-----
 src/element/Nip05.js  | 35 ++++++++++++++++++++---------------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/element/Nip05.css b/src/element/Nip05.css
index bb7d10d0..f80f464b 100644
--- a/src/element/Nip05.css
+++ b/src/element/Nip05.css
@@ -15,9 +15,5 @@
 
 .nip05 .badge {
      margin-left: .2em;
-}
-
-.nip05 .error {
-     margin-top: .2em;
-     margin-left: .2em;
+     margin-top: .1em;
 }
diff --git a/src/element/Nip05.js b/src/element/Nip05.js
index 70e7eed3..84347031 100644
--- a/src/element/Nip05.js
+++ b/src/element/Nip05.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 
 import './Nip05.css'
 
@@ -28,30 +28,35 @@ const Nip05 = ({ nip05, pubkey }) => {
     }, [nip05, name, domain])
 
     return (
-       <div className="flex nip05">
+       <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
          {!isDefaultUser && <div className="nick">{name}</div>}
          <div className="domain">
              {!isDefaultUser && '@'}
              {domain}
          </div>
-         {isVerified && (
-           <span className="badge">
-             <FontAwesomeIcon
-               color={"var(--success)"}
-               icon={faCheck}
-               size="xs"
-             />
-           </span>
-         )}
-         {couldNotVerify && (
-           <span className="error">
+         <span className="badge">
+           {!isVerified && !couldNotVerify && (
+               <FontAwesomeIcon
+                 color={"var(--fg-color)"}
+                 icon={faSpinner}
+                 size="xs"
+               />
+           )}
+           {isVerified && (
+               <FontAwesomeIcon
+                 color={"var(--success)"}
+                 icon={faCheck}
+                 size="xs"
+               />
+           )}
+           {couldNotVerify && (
              <FontAwesomeIcon
                color={"var(--error)"}
                icon={faTriangleExclamation}
                size="xs"
              />
-           </span>
-         )}
+           )}
+         </span>
        </div>
     )
 }