add loading icons

src/App.js

@@ -37,6 +37,7 @@ function Contract() {
   const { connect } = useConnect({connector});
   const { disconnect } = useDisconnect();
   const _contract = {address: contractAddress, abi: ABI}
+  const [isLoading, setIsLoading] = useState(0);
   const [options, setOptions] = useState({ 
     totalSupply: null,
     max: null,
@@ -226,7 +227,10 @@ function Contract() {
       <>
         <button className="button" style={{marginBottom: '1em'}} onClick={() => disconnect()}>Disconnect Wallet</button>
         {options.totalSupply === options.max && options.tokensSet === true && (
-          <button className="button is-info" style={{marginBottom: '1em', marginLeft: '1em'}} onClick={async () => await checkClaimable()}>Check Claimable Tokens</button>
+          <button className={"button is-info " + (isLoading === 1 && "is-loading")} style={{marginBottom: '1em', marginLeft: '1em'}} onClick={async () => {
+            setIsLoading(1);
+            await checkClaimable().then(() => setIsLoading(0));
+          }}>Check Claimable Tokens</button>
         )}
         {options.totalSupply === options.max && options.tokensSet === false && (
           <button className="button is-warning" style={{marginBottom: '1em', marginLeft: '1em'}} disabled>Tokens not entered yet. Go degen.</button>
@@ -235,10 +239,11 @@ function Contract() {
         {options.claimableTokens !== '' && (
           <div className="buttons">
             {JSON.parse(options.claimableTokens).map((tokenId, idx) => (
-              <button key={idx} className="button is-success" style={{marginBottom: '1em', marginRight: '1em'}} onClick={async () => {
+              <button key={idx} className={"button is-success " + (isLoading === 1 && "is-loading")} style={{marginBottom: '1em', marginRight: '1em'}} onClick={async () => {
+                setIsLoading(1);
                 await claimToken(tokenId).then(async d => {
-                  await checkClaimable();
+                  await checkClaimable().then(() => setIsLoading(0));
-                });
+                }).catch(() => setIsLoading(0));
               }}>
                 Claim Token {tokenId}
               </button>
@@ -290,7 +295,7 @@ function Contract() {
         )}
         {options.totalSupply === options.max && (
           <div className="notification is-success">
-            All lottery tokens have been sold! ETH claims will be made available to winners approximately 48 hours after mint out.
+            All lottery tokens have been sold! Ether claims will be made available to winners approximately 48 hours after mint out.
           </div>
         )}
         <div className="notification is-info">